article: shiki and mermaid in 11ty

.eleventy.js

@@ -32,8 +32,8 @@ async function do_minifyhtml(source, output_path) {
 
 module.exports = function(eleventyConfig) {
   // Plugins
-  eleventyConfig.addPlugin(require("./src/libs/shiki.js"), { });
-  eleventyConfig.addPlugin(require("./src/libs/mermaid.js"), { mermaid_config: {'startOnLoad': false, 'theme': 'default' }});
+  eleventyConfig.addPlugin(require("./src/libs/shiki.js"));
+  eleventyConfig.addPlugin(require("./src/libs/mermaid.js"));
 
   // To enable merging of tags
   eleventyConfig.setDataDeepMerge(true)

package.json

@@ -26,6 +26,7 @@
     "markdown-it": "14.1.0",
     "markdown-it-anchor": "9.0.1",
     "shiki": "1.10.3",
+    "@shikijs/transformers": "1.10.3",
     "tailwindcss": "3.4.4",
     "html-minifier-terser": "7.2.0",
     "terser": "5.31.2"

src/assets/styles/index.css

@@ -21,6 +21,19 @@ html.dark .shiki span {
   text-decoration: var(--shiki-dark-text-decoration) !important;
 }
 
+/* Shiki code line diffs */
+.shiki span.line.diff.add,
+.shiki span.line.diff.add span
+{
+  background-color: rgba(16, 185, 129, 0.14) !important
+}
+
+.shiki span.line.diff.remove,
+.shiki span.line.diff.remove span
+{
+  background-color: rgba(244, 63, 94, 0.14) !important
+}
+
 /* Copy code buttons on code blocks */
 /* https://junges.dev/2-how-to-add-github-copy-to-clipboard-button-on-your-docsblog */
 pre[class*="shiki"] {
@@ -30,9 +43,6 @@ pre[class*="shiki"] {
 }
 
 pre > .button-copy-code {
-  @apply rounded;
-  @apply bg-gray-300;
-  @apply py-2 px-2;
   position: absolute;
   top: 32px;
   right: 16px;
@@ -43,21 +53,3 @@ pre > .button-copy-code {
     display: none;
   }
 }
-
-pre > .button-copy-code:hover {
-  @apply border-2 border-gray-600;
-  @apply bg-gray-200;
-}
-
-pre > .button-copy-code:focus {
-  @apply bg-gray-300;
-}
-
-.copy-docs-icon {
-  fill: #0a001f;
-}
-
-.docs-copied-icon {
-  color: #148a25 !important;
-  fill: #148a25 !important;
-}

src/libs/mermaid.js

@@ -1,5 +1,9 @@
 module.exports = (eleventyConfig, options) => {
-  let mermaid_config = {...options?.mermaid_config || {}, ...{loadOnSave: true}};
+  let mermaid_config = {
+    startOnLoad: false,
+    theme: 'default',
+    loadOnSave: true
+  };
   let src = options?.mermaid_js_src || "https://unpkg.com/mermaid/dist/mermaid.esm.min.mjs";
 
   eleventyConfig.addLiquidShortcode("mermaid_js_scripts", () => {

src/libs/shiki.js

@@ -8,6 +8,7 @@ module.exports = (eleventyConfig, options) => {
   eleventyConfig.on('eleventy.before', async () => {
     const shiki = await import('shiki');
     const fs = await import('fs');
+    const { transformerNotationDiff } = await import('@shikijs/transformers');
 
     // Load the theme object from a file, a network request, or anywhere
     const darkColourTheme = JSON.parse(fs.readFileSync('src/libs/nomos-black-colour-theme.json', 'utf8'))
@@ -23,7 +24,9 @@ module.exports = (eleventyConfig, options) => {
         'sql',
         'csharp',
         'fsharp',
-        'xml'
+        'xml',
+        'javascript',
+        'css'
       ],
     });
 
@@ -43,7 +46,8 @@ module.exports = (eleventyConfig, options) => {
                 themes: {
                   light: "light-plus",
                   dark: "NomosBlack"
-                }
+                },
+                transformers: [ transformerNotationDiff() ]
               });
           }
         }