fix static code highlighting in md

Author: mbostock

src/runtime/stdlib/md.ts

@@ -3,63 +3,72 @@ import type {TemplateRenderer} from "./template.js";
 
 const mi = MarkdownIt({html: true, linkify: true, typographer: true});
 
-export const md: TemplateRenderer & {document?: Document} = (template, ...values) => {
-  const {document = window.document} = md;
-  let source = template[0];
-  let fragment: DocumentFragment | null = null;
-  let partIndex = -1;
-  const parts: Node[] = [];
+export function MarkdownRenderer({
+  document = window.document
+}: {
+  document?: Document;
+} = {}): TemplateRenderer<HTMLElement> {
+  return function (template, ...values) {
+    let source = template[0];
+    let fragment: DocumentFragment | null = null;
+    let partIndex = -1;
+    const parts: Node[] = [];
 
-  // Concatenate the text using comments as placeholders.
-  for (let i = 0, n = values.length; i < n; ++i) {
-    const value = values[i];
-    if (value instanceof Node) {
-      parts[++partIndex] = value;
-      source += `<!--o:${partIndex}-->`;
-    } else if (Array.isArray(value)) {
-      for (const node of value) {
-        if (node instanceof Node) {
-          if (fragment === null) {
-            parts[++partIndex] = fragment = document.createDocumentFragment();
-            source += `<!--o:${partIndex}-->`;
+    // Concatenate the text using comments as placeholders.
+    for (let i = 0, n = values.length; i < n; ++i) {
+      const value = values[i];
+      if (value instanceof Node) {
+        parts[++partIndex] = value;
+        source += `<!--o:${partIndex}-->`;
+      } else if (Array.isArray(value)) {
+        for (const node of value) {
+          if (node instanceof Node) {
+            if (fragment === null) {
+              parts[++partIndex] = fragment = document.createDocumentFragment();
+              source += `<!--o:${partIndex}-->`;
+            }
+            fragment.appendChild(node);
+          } else {
+            fragment = null;
+            source += node;
           }
-          fragment.appendChild(node);
-        } else {
-          fragment = null;
-          source += node;
         }
+        fragment = null;
+      } else {
+        source += value;
       }
-      fragment = null;
-    } else {
-      source += value;
+      source += template[i + 1];
     }
-    source += template[i + 1];
-  }
 
-  // Render the text.
-  const root = document.createElement("div");
-  root.innerHTML = mi.render(source);
+    // Render the text.
+    const root = document.createElement("div");
+    root.innerHTML = mi.render(source);
 
-  // Walk the rendered content to replace comment placeholders.
-  if (++partIndex > 0) {
-    const nodes = new Array<Comment>(partIndex);
-    const walker = document.createTreeWalker(root, NodeFilter.SHOW_COMMENT, null);
-    while (walker.nextNode()) {
-      const node = walker.currentNode as Comment;
-      if (/^o:\d+$/.test(node.nodeValue!)) {
-        nodes[+node.nodeValue!.slice(2)] = node;
+    // Walk the rendered content to replace comment placeholders.
+    if (++partIndex > 0) {
+      const nodes = new Array<Comment>(partIndex);
+      const walker = document.createTreeWalker(root, NodeFilter.SHOW_COMMENT, null);
+      while (walker.nextNode()) {
+        const node = walker.currentNode as Comment;
+        if (/^o:\d+$/.test(node.nodeValue!)) {
+          nodes[+node.nodeValue!.slice(2)] = node;
+        }
+      }
+      for (let i = 0; i < partIndex; ++i) {
+        const node = nodes[i];
+        node.parentNode?.replaceChild(parts[i], node);
       }
     }
-    for (let i = 0; i < partIndex; ++i) {
-      const node = nodes[i];
-      node.parentNode?.replaceChild(parts[i], node);
-    }
-  }
 
-  const codes = root.querySelectorAll<HTMLElement>("code[class^=language-]");
-  if (codes.length > 0) {
-    import("./highlight.js").then(({highlight}) => codes.forEach(highlight));
-  }
+    return root;
+  };
+}
+
+let renderer: TemplateRenderer<HTMLElement> | undefined;
 
+export const md: TemplateRenderer = (template, ...values) => {
+  const root = (renderer ??= MarkdownRenderer())(template, ...values);
+  const codes = root.querySelectorAll<HTMLElement>("code[class^=language-]");
+  if (codes.length > 0) import("./highlight.js").then(({highlight}) => codes.forEach(highlight));
   return root.childNodes.length === 1 ? root.removeChild(root.firstChild!) : root;
 };

src/runtime/stdlib/template.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-export type TemplateRenderer = (template: readonly string[], ...values: any[]) => Node;
-export type RawTemplateRenderer = (template: {raw: readonly string[]}, ...values: any[]) => Node;
-export type AsyncRawTemplateRenderer = (template: {raw: readonly string[]}, ...values: any[]) => Promise<Node>;
+export type TemplateRenderer<T = Node> = (template: readonly string[], ...values: any[]) => T;
+export type RawTemplateRenderer<T = Node> = (template: {raw: readonly string[]}, ...values: any[]) => T;
+export type AsyncRawTemplateRenderer<T = Node> = (template: {raw: readonly string[]}, ...values: any[]) => Promise<T>;

src/vite/observable.ts

@@ -10,7 +10,7 @@ import {Sourcemap} from "../javascript/sourcemap.js";
 import {transpile} from "../javascript/transpile.js";
 import {parseTemplate} from "../javascript/template.js";
 import {highlight} from "../runtime/stdlib/highlight.js";
-import {md} from "../runtime/stdlib/md.js";
+import {MarkdownRenderer} from "../runtime/stdlib/md.js";
 
 export function observable({
   window = new JSDOM().window,
@@ -35,6 +35,7 @@ export function observable({
         const tsource = await readFile(template, "utf-8");
         const document = parser.parseFromString(tsource, "text/html");
         const statics = new Set<Cell>();
+        const md = MarkdownRenderer({document});
 
         const version = (await import("../../package.json", {with: {type: "json"}})).default.version;
         let generator = document.querySelector("meta[name=generator]");
@@ -54,10 +55,12 @@ export function observable({
           div.id = `cell-${id}`;
           div.className = "observablehq observablehq--cell";
           if (mode === "md") {
-            md.document = document;
             const template = parseTemplate(value);
             if (!template.expressions.length) statics.add(cell);
-            div.appendChild(md([stripExpressions(template, value)]));
+            const content = md([stripExpressions(template, value)]);
+            const codes = content.querySelectorAll<HTMLElement>("code[class^=language-]");
+            await Promise.all(Array.from(codes, highlight));
+            div.appendChild(content);
           } else if (mode === "html") {
             const template = parseTemplate(value);
             if (!template.expressions.length) statics.add(cell);