Add Shiki

Author: WebDevSimplified

astro.config.mjs

@@ -8,28 +8,60 @@ import youtubeEmbed from "./src/plugins/youtubeEmbed.mjs"
 import responsiveImages from "./src/plugins/responsiveImages.mjs"
 import codeHighlightPre from "./src/plugins/codeHighlightPre.mjs"
 import preact from "@astrojs/preact" // @ts-check
+import remarkShiki from "@stefanprobst/remark-shiki"
+import * as shiki from "shiki"
+import rangeParser from "parse-numeric-range"
 
 import { defineConfig } from "astro/config"
 import sitemap from "@astrojs/sitemap"
 
 // https://astro.build/config
 import mdx from "@astrojs/mdx"
 
+const shikiHighlighter = await shiki.getHighlighter({ theme: "dark-plus" })
+
 // https://astro.build/config
 export default defineConfig(
   /** @type {import('astro').AstroUserConfig} */
   {
     integrations: [preact(), sitemap(), mdx()],
     site: "https://blog.webdevsimplified.com",
     markdown: {
-      // TODO: Maybe use shiki and see if it is better and has line highlighting.
-      syntaxHighlight: "prism",
-      remarkPlugins: ["remark-gfm", youtubeEmbed, responsiveImages],
+      syntaxHighlight: false,
+      // TODO: Add official Shiki integration when line highlighting is supported
+      remarkPlugins: [
+        [
+          remarkShiki,
+          {
+            highlighter: shikiHighlighter,
+            parseMeta,
+          },
+        ],
+        youtubeEmbed,
+        responsiveImages,
+      ],
     },
   }
 )
 
-// TODO: Add line highlighting to code blocks.
+function parseMeta(meta, { lang }) {
+  if (lang != null) parseLang(lang)
+
+  if (meta == null) return undefined
+  if (meta.length === 0) return undefined
+
+  return rangeParser(meta.replaceAll(/[{}]/g, "")).map(line => {
+    return { line, classes: ["highlighted-line"] }
+  })
+}
+
+function parseLang(lang) {
+  if (shikiHighlighter.getLoadedLanguages().includes(lang)) return
+
+  console.error(`The language "${lang}" doesn't exist`)
+}
+
 // TODO: Check to see if my plugins can be replaced with official integrations.
+// TODO: Implement experimental assets integration
 // TODO: Move over to the content folder
 // TODO: Add TS Support