feat: add shiki to markdown rendering for code highlighting

package.json

@@ -49,6 +49,8 @@
     "astro": "^5.17.1",
     "astro-compressor": "^1.2.0",
     "astro-icon": "^1.1.5",
+    "marked": "^17.0.1",
+    "marked-shiki": "^1.2.1",
     "mdast-util-to-string": "^4.0.0",
     "motion": "^12.29.2",
     "preline": "^4.0.0",

pnpm-lock.yaml

@@ -74,6 +74,12 @@ importers:
       astro-icon:
         specifier: ^1.1.5
         version: 1.1.5
+      marked:
+        specifier: ^17.0.1
+        version: 17.0.1
+      marked-shiki:
+        specifier: 1.2.1
+        version: 1.2.1(marked@17.0.1)(shiki@3.21.0)
       mdast-util-to-string:
         specifier: ^4.0.0
         version: 4.0.0
@@ -3730,6 +3736,17 @@ packages:
   markdown-table@3.0.4:
     resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
 
+  marked-shiki@1.2.1:
+    resolution: {integrity: sha512-yHxYQhPY5oYaIRnROn98foKhuClark7M373/VpLxiy5TrDu9Jd/LsMwo8w+U91Up4oDb9IXFrP0N1MFRz8W/DQ==}
+    peerDependencies:
+      marked: '>=7.0.0'
+      shiki: '>=1.0.0'
+
+  marked@17.0.1:
+    resolution: {integrity: sha512-boeBdiS0ghpWcSwoNm/jJBwdpFaMnZWRzjA6SkUMYb40SVaN1x7mmfGKp0jvexGcx+7y2La5zRZsYFZI6Qpypg==}
+    engines: {node: '>= 20'}
+    hasBin: true
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -10070,6 +10087,13 @@ snapshots:
 
   markdown-table@3.0.4: {}
 
+  marked-shiki@1.2.1(marked@17.0.1)(shiki@3.21.0):
+    dependencies:
+      marked: 17.0.1
+      shiki: 3.21.0
+
+  marked@17.0.1: {}
+
   math-intrinsics@1.1.0: {}
 
   maxmin@2.1.0:

src/pages/blog/[...slug].astro

@@ -4,6 +4,9 @@ import getReadingTime from 'reading-time';
 import { readItems, readSingleton } from '@directus/sdk';
 
 import directus from '@lib/directus';
+import { marked } from 'marked';
+import markedShiki from 'marked-shiki';
+import { createHighlighter } from 'shiki';
 import { getDirectusImageURL } from '@lib/directusFunctions';
 import BaseLayout from '@layouts/BaseLayout.astro';
 import Image from '@components/ui/images/Image.astro';
@@ -23,6 +26,24 @@ const category: CollectionEntry<'categories'> = (await getCollection('categories
   .filter((c) => c.slug === post.category)
   .pop() as CollectionEntry<'categories'>;
 const readingTime = getReadingTime(post.content);
+
+const highlighter = await createHighlighter({
+  themes: ['github-light', 'github-dark', 'monokai'],
+  langs: ['typescript', 'python', 'css', 'html', 'yaml', 'bash', 'json'],
+});
+marked.use(markedShiki({
+  highlight(code, lang) {
+    return highlighter.codeToHtml(code, {
+      lang: lang || 'plaintext',
+      themes: {
+        light: 'github-light',
+        dark: 'github-dark',
+      },
+      defaultColor: false,
+    });
+  }
+}));
+const content = marked.parse(post.content);
 ---
 
 <BaseLayout
@@ -126,7 +147,7 @@ const readingTime = getReadingTime(post.content);
           <article
             class="prose prose-blog sm:prose-lg dark:prose-invert max-w-none text-justify text-neutral-800 dark:text-neutral-200"
           >
-            <div set:html={post.content} />
+            <div set:html={content} />
           </article>
 
           <div

src/styles/global.css

@@ -60,6 +60,29 @@
       color var(--theme-transition),
       border-color var(--theme-transition);
   }
+
+  :root {
+    --shiki-fg: var(--shiki-light);
+    --shiki-bg: var(--color-neutral-200);
+  }
+
+  .dark {
+    --shiki-fg: var(--shiki-dark);
+    --shiki-bg: var(--color-neutral-800);
+  }
+
+  pre.shiki {
+    background-color: var(--shiki-bg) !important;
+    color: var(--shiki-fg) !important;
+  }
+
+  pre.shiki span {
+    color: var(--shiki-light);
+  }
+
+  .dark pre.shiki span {
+    color: var(--shiki-dark) !important;
+  }
 }
 
 /* Content reveal animations */