highlight with hljs and catppuccin

.eleventy.js

@@ -1,8 +1,9 @@
 const Nunjucks = require('nunjucks');
 const nunjucksDate = require('nunjucks-date');
-const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
-const markdownIt = require('markdown-it');
-const markdownItClass = require('@toycode/markdown-it-class');
+const hljs = require('highlight.js/lib/common');
+const { setup } = require('highlightjs-glimmer');
+const markdownit = require('markdown-it');
+const markdownitClass = require('@toycode/markdown-it-class');
 
 const markdownClassMapping = {
   h1: ['text-6xl', 'mt-6', 'text-pink'],
@@ -22,6 +23,22 @@ const markdownClassMapping = {
   li: ['text-subtext0'],
 };
 
+setup(hljs);
+const md = markdownit({
+  linkify: true,
+  html: true,
+  highlight: function(str, lang) {
+    if (lang && hljs.getLanguage(lang)) {
+      try {
+        return hljs.highlight(str, { language: lang }).value;
+      } catch (__) {}
+    }
+
+    return ''; // use external default escaping
+  }
+});
+md.use(markdownitClass, markdownClassMapping);
+
 module.exports = function(eleventyConfig) {
   let nunjucksEnvironment = new Nunjucks.Environment(
     new Nunjucks.FileSystemLoader("_includes")
@@ -29,10 +46,6 @@ module.exports = function(eleventyConfig) {
   nunjucksDate.setDefaultFormat('MMMM Do, YYYY');
   nunjucksDate.install(nunjucksEnvironment);
 
-  eleventyConfig.addPlugin(syntaxHighlight);
-
-  const md = markdownIt({ linkify: true, html: true });
-  md.use(markdownItClass, markdownClassMapping);
   eleventyConfig.setLibrary('md', md);
 
   eleventyConfig.addPassthroughCopy('img');
@@ -43,11 +56,7 @@ module.exports = function(eleventyConfig) {
     collection => collection.getAllSorted().filter(item => item.data.pinned),
   );
 
-  eleventyConfig.addFilter('markdown', (value) => {
-    const md = markdownIt({ linkify: true, html: true });
-    md.use(markdownItClass, markdownClassMapping);
-    return md.render(value);
-  });
+  eleventyConfig.addFilter('markdown', value => md.render(value));
 
   eleventyConfig.setLibrary('njk', nunjucksEnvironment);
 };

_includes/base-header.html

@@ -16,7 +16,7 @@
   <meta property="og:description" content="{{ description }}" />
 
   <link href="/styles.css" rel="stylesheet">
-  <link href="https://unpkg.com/prismjs@1.20.0/themes/prism-okaidia.css" rel="stylesheet">
+  <link href="/catppuccin.variables.css" rel="stylesheet">
 
   <link rel="apple-touch-icon" sizes="180x180" href="/img/site/favicons/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="/img/site/favicons/favicon-32x32.png">

package.json

@@ -8,7 +8,9 @@
     "start": "npx postcss styles.css -o _site/styles.css --watch",
     "start:site": "npx @11ty/eleventy --serve",
     "build": "npx @11ty/eleventy",
-    "postbuild": "npx tailwindcss -i styles.css -o _site/styles.css --env production",
+    "postbuild": "npm run postbuild:styles && npm run postbuild:highlighttheme",
+    "postbuild:highlighttheme": "cp ./node_modules/@catppuccin/highlightjs/css/catppuccin.variables.css ./_site",
+    "postbuild:styles": "npx tailwindcss -i styles.css -o _site/styles.css --env production",
     "test": "echo \"Error: no test specified\" && exit 1",
     "deploy": "docker compose up --build -d"
   },
@@ -24,9 +26,14 @@
   "devDependencies": {
     "@11ty/eleventy": "^2.0.1",
     "@11ty/eleventy-plugin-syntaxhighlight": "^3.1.3",
+    "@catppuccin/highlightjs": "^0.1.4",
     "@catppuccin/tailwindcss": "^0.1.6",
     "autoprefixer": "^10.3.7",
     "cssnano": "^5.0.8",
+    "highlight.js": "^11.9.0",
+    "highlightjs-glimmer": "^2.2.1",
+    "install": "^0.13.0",
+    "npm": "^10.5.0",
     "nunjucks-date": "^1.5.0",
     "postcss": "^8.3.11",
     "postcss-cli": "^9.0.1",

repos/ember-select-light.md

@@ -24,7 +24,7 @@ ember install ember-select-light
 
 ### Example Usage
 
-```handlebars
+```htmlbars
 <SelectLight
   @value="turtle"
   @options=(array "turtle" "tortoise")

repos/svgdir2sprite.md

@@ -39,13 +39,13 @@ svgdir2sprite('./src/svgs', './build/spritesheet.svg');
 
 ### Return SVG Spritesheet to the Console
 
-``` bash
+``` shell
 svgdir2sprite ./src/svgs
 ```
 
 ### Write SVG Spritesheet to File
 
-``` bash
+``` sh
 svgdir2sprite ./src/svgs ./build/spritesheet.svg
 ```
 

styles.css

@@ -14,7 +14,17 @@
   .link:focus {
     @apply no-underline text-sky outline-2 outline-sky;
   }
+
   .outline-link {
     @apply outline-offset-4 outline-2 outline-sky;
   }
 }
+
+pre {
+  padding: 1rem 0.5rem;
+  margin: 0.5rem 0 ;
+  border-radius: 0.25rem;
+  color: rgb(var(--ctp-text));
+  background-color: rgb(var(--ctp-base));
+  outline: 1px solid rgb(var(--ctp-surface0))
+}