⚡️ Render docs codeblocks on server

packages/docs/markdoc/nodes/fence.js

@@ -1,4 +1,5 @@
 import Markdoc from "@markdoc/markdoc";
+import { getSingletonHighlighter } from "shiki";
 
 const fence = {
   render: "CodeBlock",
@@ -21,15 +22,30 @@ const fence = {
 
     const codeWithoutEmptyLastLine = code.replace(/\n$/, "");
 
-    const opts = {
-      code: codeWithoutEmptyLastLine,
+    // Prerender the code on the server to improve performance
+    const highlighter = async (highCode, highLang) => {
+      const langToLoad = highLang || "text";
+      const highlighterTool = await getSingletonHighlighter({
+        themes: ["nord"],
+        langs: [langToLoad],
+      });
+      await highlighterTool.loadTheme("nord");
+      const html = highlighterTool.codeToHtml(highCode, {
+        lang: langToLoad,
+        theme: "nord",
+      });
+      return html;
     };
+    const codeHtml = await highlighter(
+      codeWithoutEmptyLastLine,
+      attributes.language,
+    );
 
-    if (attributes.language) {
-      opts.lang = attributes.language;
-    }
-
-    return new Markdoc.Tag(this.render, opts);
+    return new Markdoc.Tag(this.render, {
+      code: codeWithoutEmptyLastLine,
+      codeHtml,
+      lang: attributes.language,
+    });
   },
 };
 

packages/docs/package.json

@@ -16,28 +16,28 @@
   "devDependencies": {
     "@markdoc/markdoc": "^0.5.4",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "2.49.2",
-    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@sveltejs/kit": "2.50.0",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.1.18",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/svelte": "^5.2.10",
+    "@testing-library/svelte": "^5.3.1",
     "@testing-library/user-event": "^14.6.1",
     "@types/eslint": "^9.6.1",
     "@types/eslint-config-prettier": "^6.11.3",
-    "@types/node": "^25.0.3",
-    "@vitest/coverage-v8": "^4.0.16",
-    "globals": "^16.5.0",
-    "jsdom": "^27.3.0",
+    "@types/node": "^25.0.9",
+    "@vitest/coverage-v8": "^4.0.17",
+    "globals": "^17.0.0",
+    "jsdom": "^27.4.0",
     "markdoc-svelte": "^4.1.0",
-    "shiki": "^3.20.0",
-    "svelte": "^5.46.0",
+    "shiki": "^3.21.0",
+    "svelte": "^5.46.4",
     "svelte-check": "^4.3.5",
     "svelte-preprocess": "^6.0.3",
     "tailwindcss": "^4.1.18",
     "typescript": "^5.9.3",
-    "vite": "^7.3.0",
-    "vitest": "^4.0.16"
+    "vite": "^7.3.1",
+    "vitest": "^4.0.17"
   },
   "type": "module"
 }

packages/docs/src/content/docs/02-frontmatter.mdoc

@@ -5,7 +5,7 @@ title: Frontmatter
 Optionally define YAML frontmatter in your file.
 Then use it in your content with the `$frontmatter` variable.
 
-```markdown
+```markdown {% process=false %}
 ---
 title: Why I switched to Markdoc
 description: What the benefits of Markdoc are and how to take advantage of them.

packages/docs/src/lib/components/CodeBlock.svelte

@@ -1,24 +1,12 @@
 <script lang="ts">
-  import { getSingletonHighlighter, type BundledLanguage } from "shiki";
-
   import CopyButton from "./CopyButton.svelte";
   import "./CodeBlock.css";
 
-  let { code, lang }: { code: string; lang?: BundledLanguage } = $props();
-
-  const highlighter = async (highCode: string, highLang?: BundledLanguage) => {
-    const langToLoad = highLang || "text";
-    const highlighterTool = await getSingletonHighlighter({
-      themes: ["nord"],
-      langs: [langToLoad],
-    });
-    await highlighterTool.loadTheme("nord");
-    const html = highlighterTool.codeToHtml(highCode, {
-      lang: langToLoad,
-      theme: "nord",
-    });
-    return html;
-  };
+  let {
+    code,
+    codeHtml,
+    lang,
+  }: { code: string; codeHtml: string; lang?: string } = $props();
 </script>
 
 <div class="code-block-wrapper rounded-md bg-codeblock-500">
@@ -32,8 +20,6 @@
     {/if}
     <CopyButton textToCopy={code} />
   </div>
-  {#await highlighter(code, lang) then highlightedCode}
-    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-    {@html highlightedCode}
-  {/await}
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+  {@html codeHtml}
 </div>