fix pre[data-language]

mbostock · mbostock · commit 05aa66a62f51 · 2025-07-28T16:02:38.000-04:00
diff --git a/docs/kit.html b/docs/kit.html
@@ -22,7 +22,7 @@
 
     You can install Notebook Kit from [npm](https://www.npmjs.com/package/@observablehq/notebook-kit):
 
-    ```bash
+    ```sh
     npm install @observablehq/notebook-kit
     ```
 
@@ -51,17 +51,17 @@
     <!doctype html>
     <notebook>
       <title>Hello, world!</title>
-      <script id="1" type="text/markdown">
+      <script type="text/markdown">
         # Hello, world!
       <\/script>
-      <script id="2" type="module" pinned>
+      <script type="module" pinned>
         1 + 2
       <\/script>
     </notebook>
     ```
   </script>
   <script id="60" type="text/markdown">
-    The cell <code class="language-html">&lt;script&gt;</code> element should use four spaces of indentation for each line; these four leading spaces will be trimmed when parsing the notebook. (In the future, we'll likely make this contextual to allow more or less indentation.)
+    The cell <code class="language-html">&lt;script&gt;</code> element should use four spaces of indentation for each line; these four leading spaces are trimmed when parsing the notebook. (In the future, we'll likely make this contextual to allow varied indentation.)
   </script>
   <script id="49" type="text/markdown">
     The `type` attribute determines each cell's mode, which can be one of:
@@ -165,7 +165,7 @@ <h1>Hello, <i>world</i>!</h1>
     - `stark`
     - `sun-faded`
 
-    See [Observable Framework's themes](https://observablehq.com/framework/themes) for a visual overview of themes. More themes may be added in the future, and custom themes can be designed using standard stylesheets.
+    See [Observable Framework's themes](https://observablehq.com/framework/themes) for a visual overview. More themes may be added in the future, and custom themes can be applied using standard stylesheets.
   </script>
   <script id="56" type="text/markdown">
     See [`notebook.ts`](https://github.com/observablehq/notebook-kit/blob/main/src/lib/notebook.ts) for TypeScript types representing notebooks and cells.
diff --git a/src/runtime/stdlib/highlight.ts b/src/runtime/stdlib/highlight.ts
@@ -20,7 +20,13 @@ export const highlighter = tagHighlighter([
 ]);
 
 export async function highlight(code: HTMLElement): Promise<void> {
-  const parser = await getParser(code);
+  const language = getLanguage(code);
+  if (!language) return;
+
+  const parent = code.parentElement;
+  if (parent) parent.dataset.language = language;
+
+  const parser = await getParser(language);
   if (!parser) return;
 
   const document = code.ownerDocument;
@@ -46,15 +52,12 @@ export async function highlight(code: HTMLElement): Promise<void> {
   highlightCode(text, tree, highlighter, emit, emitBreak);
 }
 
-async function getParser(code: HTMLElement): Promise<Parser | undefined> {
-  const dialect = getLanguage(code);
-  switch (dialect) {
+async function getParser(language: string): Promise<Parser | undefined> {
+  switch (language) {
     case "js":
     case "ts":
     case "jsx":
-    case "javascript":
-    case "typescript":
-      return (await import("@lezer/javascript")).parser.configure({dialect});
+      return (await import("@lezer/javascript")).parser.configure({dialect: language});
     case "html":
       return (await import("@lezer/html")).parser;
     case "css":
@@ -66,8 +69,15 @@ async function getParser(code: HTMLElement): Promise<Parser | undefined> {
 }
 
 function getLanguage(code: HTMLElement): string | undefined {
-  return [...code.classList]
+  const language = [...code.classList]
     .find((c) => c.startsWith("language-"))
     ?.slice("language-".length)
     ?.toLowerCase();
+  switch (language) {
+    case "javascript":
+      return "js";
+    case "typescript":
+      return "ts";
+  }
+  return language;
 }
diff --git a/src/vite/observable.ts b/src/vite/observable.ts
@@ -89,13 +89,6 @@ export function observable({
             code.textContent = value;
             await highlight(code);
           }
-          for (const pre of contents.querySelectorAll("pre")) {
-            const child = pre.firstElementChild;
-            if (child?.tagName !== "CODE") continue;
-            const language = getLanguage(child);
-            if (!language) continue;
-            pre.dataset.language = language;
-          }
           cells.appendChild(contents);
         }
 

Original file line number	Diff line number	Diff line change
`@@ -89,13 +89,6 @@ export function observable({`
`89`	`89`	`code.textContent = value;`
`90`	`90`	`await highlight(code);`
`91`	`91`	`}`
`92`		`- for (const pre of contents.querySelectorAll("pre")) {`
`93`		`- const child = pre.firstElementChild;`
`94`		`- if (child?.tagName !== "CODE") continue;`
`95`		`- const language = getLanguage(child);`
`96`		`- if (!language) continue;`
`97`		`- pre.dataset.language = language;`
`98`		`- }`
`99`	`92`	`cells.appendChild(contents);`
`100`	`93`	`}`
`101`	`94`