upgraded catppuccin deps, prettier code blocks

.eleventy.js

@@ -35,6 +35,7 @@ const markdownClassMapping = {
   video: ['max-w-full', 'rounded-lg', 'max-h-600px', 'contrast-more:contrast-50'], // (contrast-more-50 here undoes the content contrast boost elsewhere)
   ul: ['list-disc', 'ml-4', 'text-subtext0'],
   li: ['text-subtext0'],
+  code: ['hljs']
 };
 
 setup(hljs);
@@ -44,7 +45,7 @@ const md = markdownit({
   highlight: function (str, lang) {
     if (lang && hljs.getLanguage(lang)) {
       try {
-        return hljs.highlight(str, { language: lang }).value;
+        return hljs.highlight(str, { language: lang }).value + `<span class="hljs-language-icon">${lang}</span>`;
       } catch (__) { }
     }
 

_includes/base-header.html

@@ -28,7 +28,7 @@
   <meta name="generator" content="Eleventy v3.0.0">
 
   <link href="/styles.css" rel="stylesheet">
-  <link href="/catppuccin.variables.css" rel="stylesheet">
+  <link href="/catppuccin-variables.rgb.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-lock.json

@@ -14,14 +14,14 @@
       "devDependencies": {
         "@11ty/eleventy": "^3.0.0",
         "@11ty/eleventy-plugin-syntaxhighlight": "^3.1.3",
-        "@catppuccin/highlightjs": "^0.1.4",
+        "@catppuccin/highlightjs": "^1.0.1",
         "@catppuccin/tailwindcss": "^0.1.6",
         "@divriots/jampack": "^0.23.3",
         "autoprefixer": "^10.3.7",
         "cheerio": "^1.0.0-rc.12",
         "cssnano": "^5.0.8",
         "dayjs": "^1.11.10",
-        "highlight.js": "^11.9.0",
+        "highlight.js": "^11.11.0",
         "highlightjs-glimmer": "^2.2.1",
         "install": "^0.13.0",
         "npm": "^10.5.0",
@@ -332,9 +332,9 @@
       }
     },
     "node_modules/@catppuccin/highlightjs": {
-      "version": "0.1.4",
+      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@catppuccin/highlightjs/-/highlightjs-0.1.4.tgz",
+      "resolved": "https://registry.npmjs.org/@catppuccin/highlightjs/-/highlightjs-1.0.1.tgz",
-      "integrity": "sha512-PEzMrpE7VvXFLvQuNAomTcvAuXUJlBlcqvSqhHYFapSxBKye+auNokemssEVuv053KH7Go44Aa4sE+rZNOM5cQ==",
+      "integrity": "sha512-wnagsNQbJroHQMalkprwRoapfGV1hHRx46d7GXp4kf6rlShImBlgpqPCt9OD471Gq4qpHdfFH/GJFIvY1CLqHA==",
       "dev": true,
       "funding": [
         {

package.json

@@ -11,7 +11,7 @@
     "start:site": "npx @11ty/eleventy --serve",
     "build": "npx @11ty/eleventy",
     "postbuild": "run-s postbuild:*",
-    "postbuild:highlighttheme": "cp ./node_modules/@catppuccin/highlightjs/css/catppuccin.variables.css ./_site",
+    "postbuild:highlighttheme": "cp ./node_modules/@catppuccin/highlightjs/css/catppuccin-variables.rgb.css ./_site",
     "postbuild:styles": "npx tailwindcss -i styles.css -o _site/styles.css --env production",
     "optimize": "rm -rf _site/_jampack && jampack _site",
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -31,14 +31,14 @@
   "devDependencies": {
     "@11ty/eleventy": "^3.0.0",
     "@11ty/eleventy-plugin-syntaxhighlight": "^3.1.3",
-    "@catppuccin/highlightjs": "^0.1.4",
+    "@catppuccin/highlightjs": "^1.0.1",
     "@catppuccin/tailwindcss": "^0.1.6",
     "@divriots/jampack": "^0.23.3",
     "autoprefixer": "^10.3.7",
     "cheerio": "^1.0.0-rc.12",
     "cssnano": "^5.0.8",
     "dayjs": "^1.11.10",
-    "highlight.js": "^11.9.0",
+    "highlight.js": "^11.11.0",
     "highlightjs-glimmer": "^2.2.1",
     "install": "^0.13.0",
     "npm": "^10.5.0",

repos/svgdir2sprite.md

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

styles.css

@@ -56,24 +56,43 @@ pre, p > code {
   font-family: "VictorMono", monospace;
   font-variant-ligatures: contextual;
   color: rgb(var(--ctp-text));
-  outline: 1px solid rgb(var(--ctp-surface0));
-  border-radius: 0.25rem;
 }
 p > code {
   padding: 0 .25rem;
   display: inline-block;
   background-color: rgb(var(--ctp-mantle));
-  color: rgb(var(--ctp-blue));
+  color: rgb(var(--ctp-red));
+  border: 1px solid rgb(var(--ctp-surface0));
+  border-radius: 0.25rem;
   font-size: 0.875rem;
 }
 pre {
-  padding: 0.5rem 0.75rem;
+  position: relative;
-  margin: 0.5rem 0 ;
+  padding: 1rem 0.75rem;
+  margin: 1rem 0 ;
   overflow: auto;
   max-width: 100%;
   white-space: pre-wrap;
   page-break-inside: avoid;
   background-color: rgb(var(--ctp-crust));
+  mask:
+    radial-gradient(0.56rem at 50% 0.75rem,#000 99%,#0000 101%) calc(50% - 0.5rem) 0/1rem 51% repeat-x,
+    radial-gradient(0.56rem at 50% -0.5rem,#0000 99%,#000 101%) 50% .25rem/1rem calc(51% - .25rem) repeat-x,
+    radial-gradient(0.56rem at 50% calc(100% - 0.75rem),#000 99%,#0000 101%) calc(50% - 0.5rem) 100%/1rem 51% repeat-x,
+    radial-gradient(0.56rem at 50% calc(100% + 0.5rem),#0000 99%,#000 101%) 50% calc(100% - .25rem)/1rem calc(51% - .25rem) repeat-x;
+
+  .hljs-language-icon {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: .2rem .25rem;
+    color: rgb(var(--ctp-subtext1));
+    background-color: rgb(var(--ctp-base));
+    border-left: 1px solid rgb(var(--ctp-surface0));
+    border-bottom: 1px solid rgb(var(--ctp-surface0));
+    border-radius: 0 0 0 0.25rem;
+    font-size: 0.875rem;
+  }
 }
 
 .hljs-comment {