show code language

Author: mbostock

docs/system-guide.html

@@ -5,18 +5,6 @@
     # Observable Notebooks 2.0 <span style="color: var(--theme-foreground-faint);">System guide</span>
 
     <link rel="stylesheet" href="./style.css">
-
-    <style>
-
-    figure img {
-      border-radius: 6px;
-    }
-
-    .sans {
-      font-family: var(--sans-serif);
-    }
-
-    </style>
   </script>
   <script id="38" type="text/markdown">
     <aside>This document is itself a notebook, and this paragraph is a Markdown cell.</aside>
@@ -93,7 +81,7 @@
     greeting("world")
   </script>
   <script id="19" type="module" pinned="">
-    Plot.lineY(aapl, {x: "Date", y: "Close"}).plot({y: {grid: true}})
+    Plot.lineY(AMZN, {x: "Date", y: "Close"}).plot({y: {grid: true}})
   </script>
   <script id="56" type="text/markdown">
     When a top-level variable is defined as a promise, referencing cells will implicitly await the promise and only see the resolved value.
@@ -184,12 +172,15 @@
   <script id="83" type="text/markdown">
     Use dollar-curly <code>$\{…}</code> expressions to interpolate dynamic JavaScript values into Markdown, including text, DOM nodes, and bits of dynamic Markdown.
   </script>
+  <script id="84" type="text/markdown" pinned="">
+    Hello, ${atob("d29ybGQ=")}!
+  </script>
   <script id="5" type="text/markdown">
     ---
 
     ## HTML
 
-    HTML cells are used similarly to Markdown cells, and also support dollar-curly `$\{…}` interpolation. Unlike Markdown cells, HTML cells automatically escape any interpolated values, providing additional safety when handling dynamic and user-specified content.
+    HTML cells are used similarly to Markdown cells, and also support dollar-curly <code>$\{…}</code> interpolation. Unlike Markdown cells, HTML cells automatically escape any interpolated values, providing additional safety when handling dynamic and user-specified content.
   </script>
   <script id="73" type="text/html" pinned="">
     Interpolated values are considered text, ${"not <i>HTML</i>"}.

src/styles/global.css

@@ -79,6 +79,20 @@ figcaption code {
   font-size: inherit;
 }
 
+pre[data-language] {
+  position: relative;
+}
+
+pre[data-language]::before {
+  content: attr(data-language);
+  float: right;
+  margin: -4px -8px -4px -4px;
+  padding: 4px;
+  font-size: 12px;
+  line-height: 21px;
+  color: var(--theme-foreground-muted);
+}
+
 h1 code,
 h2 code,
 h3 code,

src/vite/observable.ts

@@ -65,7 +65,8 @@ export function observable({
         cells ??= document.body.appendChild(document.createElement("main"));
         for (const cell of notebook.cells) {
           const {id, mode, pinned, value} = cell;
-          const div = cells.appendChild(document.createElement("div"));
+          const contents = document.createDocumentFragment();
+          const div = contents.appendChild(document.createElement("div"));
           div.id = `cell-${id}`;
           div.className = "observablehq observablehq--cell";
           if (mode === "md") {
@@ -82,12 +83,20 @@ export function observable({
           }
           collectAssets(assets, div);
           if (pinned) {
-            const pre = cells.appendChild(document.createElement("pre"));
+            const pre = contents.appendChild(document.createElement("pre"));
             const code = pre.appendChild(document.createElement("code"));
             code.className = `language-${mode}`;
             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);
         }
 
         // Don’t error if assets are missing (matching Vite’s behavior).
@@ -210,3 +219,10 @@ function isSpaceCode(code: number): boolean {
 function escapeScript(script: string): string {
   return script.replace(/<\/script>/g, "<\\/script>"); // TODO handle other contexts
 }
+
+function getLanguage(code: Element): string | undefined {
+  return [...code.classList]
+    .find((c) => c.startsWith("language-"))
+    ?.slice("language-".length)
+    ?.toLowerCase();
+}