Highlight example code with the API documentation palette

examples/README.md

@@ -34,6 +34,12 @@ Use the archive's absolute path when running a copied gallery.
 installed `smithkit` package and has no aliases to repository source. The basic
 example also remains runnable independently from its own directory.
 
+Source panels use Shiki with the same `dark-plus` syntax theme as the API reference.
+The shared presentation helper lives in `basic/highlight.ts` so the basic example
+remains self-contained. Highlighting is not needed by the chart integration code.
+HTML host snippets are formatted with Prettier before highlighting, including in
+production builds where the page markup is minified.
+
 The pages use ordinary HTML elements and containers with an explicit size. A white
 host background keeps the light theme's dark labels readable: the light preset's
 SVG background is transparent. The dark preset supplies its own opaque background.

examples/angular/page.ts

@@ -4,6 +4,7 @@ import application from './main.ts?raw';
 import data from '../framework-data.ts?raw';
 import '../style.css';
 import '../framework.css';
+import { showCode } from '../basic/highlight';
 
-document.querySelector('#source')!.textContent = source;
-document.querySelector('#markup')!.textContent = application + '\n\n// framework-data.ts\n' + data;
+void showCode('#source', source);
+void showCode('#markup', application + '\n\n// framework-data.ts\n' + data);

examples/basic/highlight.ts

@@ -0,0 +1,48 @@
+import { createHighlighterCore } from 'shiki/core';
+import { createOnigurumaEngine } from 'shiki/engine/oniguruma';
+import html from 'shiki/langs/html.mjs';
+import tsx from 'shiki/langs/tsx.mjs';
+import typescript from 'shiki/langs/typescript.mjs';
+import darkPlus from 'shiki/themes/dark-plus.mjs';
+
+// Keep this helper in the independently runnable basic example. The gallery shares it.
+// Match TypeDoc's dark theme and load only the languages displayed in our examples.
+const highlighter = createHighlighterCore({
+  themes: [darkPlus],
+  langs: [html, tsx, typescript],
+  engine: createOnigurumaEngine(import('shiki/wasm')),
+});
+
+/** Color source without changing its copyable text or interpreting HTML examples as markup. */
+export async function showCode(
+  selector: string,
+  source: string,
+  language: 'typescript' | 'tsx' | 'html' = 'typescript',
+): Promise<void> {
+  const code = document.querySelector<HTMLElement>(selector)!;
+  code.textContent = source;
+  const { tokens, fg, bg } = (await highlighter).codeToTokens(source, {
+    lang: language,
+    theme: 'dark-plus',
+  });
+  const fragment = document.createDocumentFragment();
+  tokens.forEach((line, index) => {
+    if (index > 0) {
+      fragment.append('\n');
+    }
+    for (const token of line) {
+      const span = document.createElement('span');
+      span.textContent = token.content;
+      span.style.color = token.color ?? fg ?? '';
+      if (token.fontStyle && token.fontStyle > 0) {
+        span.style.fontStyle = token.fontStyle & 1 ? 'italic' : '';
+        span.style.fontWeight = token.fontStyle & 2 ? 'bold' : '';
+        span.style.textDecoration = token.fontStyle & 4 ? 'underline' : '';
+      }
+      fragment.append(span);
+    }
+  });
+  code.replaceChildren(fragment);
+  code.style.color = fg ?? '';
+  code.closest('pre')!.style.backgroundColor = bg ?? '';
+}

examples/basic/package.json

@@ -11,6 +11,7 @@
     "smithkit": "^0.6.0"
   },
   "devDependencies": {
+    "shiki": "4.5.0",
     "vite": "8.3.2"
   }
 }

examples/basic/page.ts

@@ -1,4 +1,5 @@
 import './main';
 import source from './main.ts?raw';
+import { showCode } from './highlight';
 
-document.querySelector('#source')!.textContent = source;
+void showCode('#source', source);

examples/basic/style.css

@@ -120,6 +120,10 @@ output {
   margin: 16px 0;
   font-variant-numeric: tabular-nums;
 }
+code,
+pre {
+  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
+}
 pre {
   overflow: auto;
   padding: 20px;
@@ -128,6 +132,7 @@ pre {
   background: var(--page);
   font-size: 13px;
   line-height: 1.65;
+  tab-size: 2;
 }
 @media (max-width: 600px) {
   main {

examples/package.json

@@ -18,6 +18,8 @@
     "rxjs": "7.8.2"
   },
   "devDependencies": {
+    "prettier": "3.9.9",
+    "shiki": "4.5.0",
     "vite": "8.3.2",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",

examples/react/page.ts

@@ -4,6 +4,7 @@ import application from './main.tsx?raw';
 import data from '../framework-data.ts?raw';
 import '../style.css';
 import '../framework.css';
+import { showCode } from '../basic/highlight';
 
-document.querySelector('#source')!.textContent = source;
-document.querySelector('#markup')!.textContent = application + '\n\n// framework-data.ts\n' + data;
+void showCode('#source', source, 'tsx');
+void showCode('#markup', application + '\n\n// framework-data.ts\n' + data, 'tsx');

examples/source.ts

@@ -1,8 +1,11 @@
 import './style.css';
+import { showCode } from './basic/highlight';
+import { format } from 'prettier/standalone';
+import * as htmlPlugin from 'prettier/plugins/html';
 
 /** Display the exact executed source and the required host markup. */
-export function showSource(source: string): void {
-  document.querySelector('#source')!.textContent = source;
+export async function showSource(source: string): Promise<void> {
+  void showCode('#source', source);
   const markup = document.querySelector('.preview')!.cloneNode(true) as HTMLElement;
   const chart = markup.querySelector('#chart')!;
   chart.replaceChildren();
@@ -11,5 +14,13 @@ export function showSource(source: string): void {
   if (output) {
     output.replaceChildren();
   }
-  document.querySelector('#markup')!.textContent = markup.innerHTML.trim();
+  const formattedMarkup = await format(markup.innerHTML, {
+    parser: 'html',
+    plugins: [htmlPlugin],
+    printWidth: 80,
+    tabWidth: 2,
+    useTabs: false,
+    htmlWhitespaceSensitivity: 'ignore',
+  });
+  await showCode('#markup', formattedMarkup.trimEnd(), 'html');
 }

examples/style.css

@@ -178,6 +178,10 @@ output {
   margin: 16px 0;
   font-variant-numeric: tabular-nums;
 }
+code,
+pre {
+  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
+}
 pre {
   overflow: auto;
   padding: 20px;
@@ -186,6 +190,7 @@ pre {
   background: var(--page);
   font-size: 13px;
   line-height: 1.65;
+  tab-size: 2;
 }
 summary {
   cursor: pointer;