Home | About | Notes

Configuring Syntax Highlighting in Eleventy

Install the eleventy syntax highlighting plugin

npm install @11ty/eleventy-plugin-syntaxhighlight --save-dev

Add the plugin to your eleventy config file (.eleventy.js)

const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(syntaxHighlight);
};

Pick a prism theme and add it to your site.
(Themes are available from https://github.com/PrismJS/prism-themes)

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Random Notes</title>
        <link rel="stylesheet" href="/css/base.css">
        <link rel="stylesheet" href="/css/prism-nord.css">
    </head>