Highlight code blocks again, and number multi-line ones

Dropping Docusaurus took Prism with it, so every fence rendered as flat text.
Shiki now highlights at build time, which keeps the pages free of a runtime
highlighter: the markdown pipeline emits the coloured HTML into the payload.

Line numbers are new — the Docusaurus site never showed them. They are limited
to blocks that actually span several lines, since a one-line install command
reads worse with a "1" beside it. The counter hangs off the .line spans Shiki
already emits, so no extra markup is needed.

Author: hz210

website/content.mjs

@@ -5,12 +5,23 @@ import { fileURLToPath } from 'node:url';
 import matter from 'gray-matter';
 import MarkdownIt from 'markdown-it';
 import anchor from 'markdown-it-anchor';
+import { createHighlighter } from 'shiki';
 
 const contentRoot = path.join(path.dirname(fileURLToPath(import.meta.url)), 'content');
 
 /** Locale directory names; the default locale lives at the content root. */
 export const CONTENT_LOCALES = ['zh-Hans', 'zh-Hant', 'es', 'fr', 'de', 'ru', 'he', 'ar', 'ja', 'ko'];
 
+// Highlighting happens at build time, so the pages carry no highlighter at
+// runtime. Shiki wraps each line in <span class="line">, which is also what the
+// line-number counter in the stylesheet hangs off.
+const highlighter = await createHighlighter({
+  themes: ['github-dark-default'],
+  langs: ['bash', 'json', 'go', 'javascript', 'typescript', 'yaml', 'toml', 'ini', 'text'],
+});
+
+const HIGHLIGHT_LANGS = new Set(highlighter.getLoadedLanguages());
+
 const markdown = new MarkdownIt({ html: true, linkify: true }).use(anchor, {
   slugify: (title) =>
     title
@@ -33,6 +44,14 @@ function tableOfContents(tokens) {
   return items;
 }
 
+markdown.options.highlight = (code, language) => {
+  const lang = HIGHLIGHT_LANGS.has(language) ? language : 'text';
+  const html = highlighter.codeToHtml(code, { lang, theme: 'github-dark-default' });
+  // Line numbers only earn their space in multi-line blocks; a one-line install
+  // command reads worse with a "1" next to it.
+  return code.trimEnd().includes('\n') ? html.replace('<pre ', '<pre data-multiline ') : html;
+};
+
 async function readDocument(file) {
   const source = await readFile(file, 'utf8');
   const parsed = matter(source);

website/package.json

@@ -22,6 +22,7 @@
     "markdown-it": "^15.0.0",
     "markdown-it-anchor": "^9.2.1",
     "sass": "^1.103.0",
+    "shiki": "^4.4.3",
     "typescript": "~5.6.2",
     "vite": "^8.2.2"
   },