render-highlight.mjs

Functions

Imports

It imports no other module of this repo. No module of this repo imports it.

Source

1// Code highlighting for render.mjs, dustinedwards-info's configuration: shiki/core with an explicit language list (the full bundle took
2// that site's Worker output to 14 MB), two high-contrast themes, Oniguruma, and a wasm loader the host injects. A site that wants other
3// languages passes its own `languages`; a site that wants none does not pass `highlight` at all.
4
5import rehypeShikiFromHighlighter from "@shikijs/rehype/core";
6import { transformerMetaHighlight } from "@shikijs/transformers";
7import { createHighlighterCore } from "shiki/core";
8import { createOnigurumaEngine } from "shiki/engine/oniguruma";
9import bash from "shiki/langs/bash.mjs";
10import css from "shiki/langs/css.mjs";
11import html from "shiki/langs/html.mjs";
12import javascript from "shiki/langs/javascript.mjs";
13import json from "shiki/langs/json.mjs";
14import markdown from "shiki/langs/markdown.mjs";
15import python from "shiki/langs/python.mjs";
16import sql from "shiki/langs/sql.mjs";
17import tsx from "shiki/langs/tsx.mjs";
18import typescript from "shiki/langs/typescript.mjs";
19import githubDarkHighContrast from "shiki/themes/github-dark-high-contrast.mjs";
20import githubLightHighContrast from "shiki/themes/github-light-high-contrast.mjs";
21
22export const GRAMMARS = {
23  bash,
24  css,
25  html,
26  javascript,
27  json,
28  markdown,
29  python,
30  sql,
31  tsx,
32  typescript,
33};
34
35export const LANGUAGES = Object.keys(GRAMMARS);
36
37// High-contrast themes because the plain github ones failed contrast on the paper colour; comments are repointed at a secondary text
38// colour.
39const COMMENT_LIGHT = "#5C5248";
40const COMMENT_DARK = "#B3A99C";
41
42/** @param {any} theme @param {string} colour */
43function withCommentColour(theme, colour) {
44  /** @type {any[]} */
45  const rules = theme.settings ?? theme.tokenColors ?? [];
46  return {
47    ...theme,
48    settings: rules.map((/** @type {any} */ rule) => {
49      const scope = Array.isArray(rule?.scope) ? rule.scope : [rule?.scope];
50      if (!scope.includes("comment")) return rule;
51      return { ...rule, settings: { ...rule.settings, foreground: colour } };
52    }),
53  };
54}
55
56const githubLight = withCommentColour(githubLightHighContrast, COMMENT_LIGHT);
57const githubDark = withCommentColour(githubDarkHighContrast, COMMENT_DARK);
58
59// Exported so a site's contrast check verifies the themes actually used, not ones it imported by name.
60export const SHIKI_THEMES = { light: githubLight, dark: githubDark };
61
62/**
63 * @param {object} [input]
64 * @param {() => Promise<any> | any} [input.wasm] Injected: a Worker refuses WebAssembly.instantiate() on bytes, so it passes an
65 *   instantiator over a statically imported module. The engine is the same, so the HTML is byte-identical. Default is shiki's own.
66 * @param {Record<string, any>} [input.languages] name to grammar; default is the ten in GRAMMARS
67 * @returns {import("./render.mjs").HighlightOptions}
68 */
69export function createHighlight({ wasm = () => import("shiki/wasm"), languages = GRAMMARS } = {}) {
70  /** @type {Promise<any> | null} */
71  let highlighterPromise = null;
72
73  // A rejection is not cached: one failed wasm load would otherwise fail every render in the isolate. The caller still sees this
74  // render's failure; the next render tries again. The loader is awaited before shiki sees it, because shiki keeps its first wasm
75  // load for the isolate, a rejected one included.
76  function getHighlighter() {
77    if (!highlighterPromise) {
78      const building = (async () =>
79        createHighlighterCore({
80          themes: [githubLight, githubDark],
81          langs: Object.values(languages),
82          // Oniguruma, not the JS regex engine: the JS engine was measured non-deterministic, which makes a byte comparison fail
83          // at random on any post with code.
84          engine: createOnigurumaEngine(await wasm()),
85        }))();
86      highlighterPromise = building;
87      building.catch(() => {
88        if (highlighterPromise === building) highlighterPromise = null;
89      });
90    }
91    return highlighterPromise;
92  }
93
94  return {
95    async plugin() {
96      return [
97        rehypeShikiFromHighlighter,
98        await getHighlighter(),
99        {
100          themes: {
101            light: "github-light-high-contrast",
102            dark: "github-dark-high-contrast",
103          },
104          // Both palettes as CSS variables per token, so code follows the page theme with no script.
105          defaultColor: false,
106          fallbackLanguage: "text",
107          // No wall-clock limit per line. Shiki's default (500 ms) stops a line early when the machine is slow, most often on the
108          // first line, while Oniguruma compiles the grammar, and paints the rest of the line in the last scope's colour: the same
109          // post then rendered to different bytes on a busy machine than on CI. Output depends on the input alone.
110          tokenizeTimeLimit: 0,
111          transformers: [
112            // Marked lines are in the stored HTML, so they show with JavaScript off.
113            transformerMetaHighlight(),
114            {
115              name: "language-label",
116              /** @this {any} @param {any} node */
117              pre(node) {
118                node.properties["data-lang"] = this.options.lang ?? "text";
119              },
120            },
121          ],
122        },
123      ];
124    },
125  };
126}