feat: replace prism with shiki

rothsandro · Nov 22, 2024 · fede6d4 · fede6d4
1 parent 952353d
commit fede6d4
Showing 7 changed files with 957 additions and 64 deletions.
diff --git a/.app/css/4-components/code-block.scss b/.app/css/4-components/code-block.scss
@@ -1,4 +1,6 @@
-@use "prism-themes/themes/prism-material-light.css";
+.shiki span {
+  color: var(--light, var(--code-l)) var(--dark, var(--code-d));
+}
 
 .code-block {
   position: relative;

diff --git a/.app/lib/core/index.js b/.app/lib/core/index.js
@@ -1,4 +1,3 @@
-import syntaxHighlightPlugin from "@11ty/eleventy-plugin-syntaxhighlight";
 import { markdownLibrary } from "./md.library.js";
 import { EleventyHtmlBasePlugin } from "@11ty/eleventy";
 
@@ -16,7 +15,6 @@ export const core = {
     config.setLibrary("md", markdownLibrary(config));
 
     config.addPlugin(EleventyHtmlBasePlugin);
-    config.addPlugin(syntaxHighlightPlugin);
 
     config.setServerOptions({
       watch: ["dist/app.js", "dist/app.*.css"],

diff --git a/.app/lib/core/md.library.js b/.app/lib/core/md.library.js
@@ -5,6 +5,13 @@ import markdownItFootnote from "markdown-it-footnote";
 import { wikilinksModule } from "./../modules/wikilinks/index.js";
 import { notesModule } from "./../modules/notes/index.js";
 import { calloutsModule } from "./../modules/callouts/index.js";
+import { fromHighlighter } from "@shikijs/markdown-it/core";
+import { createHighlighter, bundledLanguages } from "shiki/bundle/web";
+
+const highlighter = await createHighlighter({
+  langs: Object.keys(bundledLanguages),
+  themes: ["light-plus", "dark-plus"],
+});
 
 /**
  * Creates a markdown-it instance.
@@ -18,6 +25,13 @@ export const markdownLibrary = (eleventyConfig) => {
   })
     .use(markdownItTaskCheckbox)
     .use(markdownItFootnote)
+    .use(
+      fromHighlighter(highlighter, {
+        defaultColor: false,
+        cssVariablePrefix: "--code-",
+        themes: { l: "light-plus", d: "dark-plus" },
+      })
+    )
     .use(notesModule.copyCodeMarkdownPlugin)
     .use(calloutsModule.markdownPlugin)
     .use(wikilinksModule.markdownPlugin, {

diff --git a/.app/lib/modules/notes/styles/article.scss b/.app/lib/modules/notes/styles/article.scss
@@ -19,11 +19,6 @@
   p + ol {
     --flow-space: 0.75em;
   }
-
-  pre {
-    // Overwrite prism styles
-    margin-block: 0;
-  }
 }
 
 .article {
@@ -167,7 +162,7 @@
     font-size: inherit;
     padding: 0;
     word-break: break-all;
-    background-color: transparent !important;
+    background-color: transparent;
   }
 
   .footnotes-sep {