@godxjp/markdown 33.17.0 → 33.18.0

package/README.md

@@ -8,6 +8,7 @@ pnpm add @godxjp/markdown        # + `mermaid` (optional) to draw ```mermaid fen
 ````
 
 ```tsx
+import "@godxjp/markdown/katex.css"; // once, in the app entry: KaTeX's stylesheet + fonts
 import { Prose } from "@godxjp/ui/data-display";
 import { Markdown } from "@godxjp/markdown";
 
@@ -22,6 +23,29 @@ GFM — tables, task lists (read-only), fenced code with `language-*` classes, a
 strikethrough — and an `id` on every heading (GitHub slugs, de-duplicated). The output is the same
 as `react-markdown` + `remark-gfm` + `rehype-sanitize`, which is what the apps rendered before.
 
+**Math** — `$…$` and `$$…$$` inline, a `$$` block or a ` ```math ` fence for display — is
+drawn by KaTeX at parse time (no DOM: the same HTML in a browser, on a server, in a Worker), as
+HTML plus MathML, so a screen reader reads the formula. The content is literal TeX: `\,` keeps its
+backslash. A single `$` follows Pandoc's rule, so prices stay prose: `$5 and $10` and `$5-$10` are
+text (the opening `$` is followed by a non-space, the closing one preceded by a non-space and not
+by `\`, and not followed by a digit). Write `\$` for a literal dollar anywhere. A formula that does
+not parse shows its source in `.katex-error`.
+
+**The KaTeX stylesheet is the host's to load**, once: `import "@godxjp/markdown/katex.css"`. It
+`@import`s `katex/dist/katex.min.css` from the KaTeX this package depends on (so the CSS always
+matches the renderer; any bundler that resolves CSS `@import` from `node_modules` — Vite, webpack,
+esbuild — copies the fonts) and lets a wide display formula scroll instead of widening the page.
+Without it, formulas render as unstyled text plus MathML.
+
+**Syntax colour** — a fence in a known language is tokenised at parse time and every token is a
+`<span data-code-token="…">`, with the kit's names (`comment`, `keyword`, `string`,
+`string-expression`, `function`, `constant`, `parameter`, `punctuation`, `link`, `inserted`,
+`deleted`, `changed`). `Prose` colours them from the `--code-block-token-*` knobs, in light and dark —
+this package ships no code palette. Languages: bash, shell, css, diff, dockerfile, go, ini/toml,
+java, javascript, json, markdown, php, python, rust, sql, typescript, xml/html, yaml (with their
+aliases: `ts`, `js`, `jsx`, `tsx`, `sh`, `zsh`, `yml`, `html`, `py`, `rs`, …). Any other language,
+a fence without one, ` ```mermaid ` and ` ```math ` stay plain text.
+
 Every table renders inside a scroll box (`.ui-prose-table-scroll`, styled by `Prose`), keyboard-
 focusable only while it overflows, so a wide table scrolls instead of widening the page.
 
@@ -31,6 +55,15 @@ focusable only while it overflows, so a wide table scrolls instead of widening t
 - **One schema** (`markdownSchema`): links allow `http`, `https`, `mailto` and relative URLs;
   images allow `http`, `https` and relative URLs. `javascript:`, `data:` and every other scheme are
   removed — including a scheme split by tabs or newlines. SVG is never inlined from a URL.
+- **KaTeX runs with `trust: false`, `strict: "error"` and `maxSize: 10`**, before the sanitiser,
+  and the schema allows exactly what KaTeX emits: MathML elements, KaTeX's own class names,
+  geometry-only inline styles (lengths, colours, keywords — no `url()`, no parentheses at all) and
+  `svg` / `path` / `line` for radicals and stretchy arrows (no `href`, no `<image>`). `\href`,
+  `\url`, `\includegraphics`, `\htmlClass`, `\htmlId`, `\htmlStyle` and `\htmlData` render as their
+  own source text. A non-standard construct still draws (rehype-katex retries leniently, `trust` is
+  never relaxed); a user-sized box (`\rule{9999em}{9999em}`) is capped at 10em.
+- **Code tokens** are `span`s whose only attribute is `data-code-token`, pinned to the twelve names;
+  a body cannot mint one (raw HTML is dropped).
 - **Mermaid is a picture only after its SVG passes `checkMermaidSvg`**: no `<script>`,
   `<foreignObject>`, `<a>`, `<image>`, event handlers, non-fragment `href`, `url()` that leaves the
   document, or `@import`. A diagram that fails, or a host without `mermaid`, shows the code.
@@ -46,6 +79,7 @@ focusable only while it overflows, so a wide table scrolls instead of widening t
 | `components`                           | Element overrides. Mermaid fences are drawn before a host `pre` is asked, so a host code renderer keeps Mermaid.                                                                      |
 | `rehypePlugins`                        | Run after the sanitiser — presentation only.                                                                                                                                          |
 | `mermaid={false}`                      | Keep ```mermaid fences as code (or hand them to the host `pre`).                                                                                                                      |
+| `highlight={false}`                    | Leave fenced code as plain text — a host `pre` that runs its own highlighter. A host `pre` otherwise receives the tokenised `<code>`.                                                 |
 | `allowedElements` / `unwrapDisallowed` | Narrow a body (an activity feed: `strong`, `em`, `del`, `code`). Only removes.                                                                                                        |
 | `shortCellLength`                      | A table cell holding one short token (no whitespace, ≤ 24 characters by default) gets `data-short`; `Prose` keeps it on one line. `false` turns it off.                               |
 
@@ -55,7 +89,7 @@ so a narrow table scrolls instead of squashing them.
 
 ## Grammar v1 and the codec (`@godxjp/markdown/codec`)
 
-The renderer (`RENDERER_VERSION` 5), the codec and `@godxjp/block-editor` read one syntax, from one
+The renderer (`RENDERER_VERSION` 6), the codec and `@godxjp/block-editor` read one syntax, from one
 set of parsers, so a body means the same thing in the editor, on a server and on the page.
 
 ### Syntax
@@ -91,6 +125,10 @@ set of parsers, so a body means the same thing in the editor, on a server and on
 
 - **Wikilinks and embeds, verbatim** — `[[target]]`, `[[target#heading]]`, `[[target|label]]`,
   `![[embed]]` (a block when alone on its line; the inner text is kept verbatim — `![[B#見出し]]`, `![[img.png|300]]`). Marks around them survive (`**[[x]]**`). Inside a table cell write `[[x\|label]]`.
+- **Math** — `$x$`, `$$x$$`, a `$$` block, a ` ```math ` fence (Pandoc's single-dollar rule,
+  above). The codec keeps math verbatim as a raw inline / raw block (a fence is an ordinary
+  `codeBlock{language: "math"}`), so the block editor needs no math node. Because `$` is now
+  special, a literal `$x$` in text is written `\$x$`; a lone `$` (a price) is never escaped.
 - **`asset:` images** — `![alt](asset:id)` round-trips as written (the renderer resolves it through
   `resolveUrl`).
 - **Raw blocks** — anything the document does not model (raw HTML, footnote definitions, link
@@ -102,7 +140,7 @@ set of parsers, so a body means the same thing in the editor, on a server and on
 ```ts
 import { CODEC_ID, normalize, parse, serialize } from "@godxjp/markdown/codec";
 
-CODEC_ID; // "kit-md@1" — bumped whenever serialize would write a body differently
+CODEC_ID; // "kit-md@2" — bumped whenever serialize would write a body differently (@2: math)
 const doc = parse(markdown); // plain JSON, ProseMirror/Tiptap shape
 const md = serialize(doc); // canonical Markdown
 normalize(markdown) === serialize(parse(markdown)); // what the editor saves

package/dist/codec/index.d.ts

@@ -64,7 +64,7 @@ declare function serialize(doc: Doc | DocNode): string;
  * Identifies the serializer's output. Bumped whenever `serialize` would write a stored body
  * differently, so a host can tell which normalization a saved `normalized_body` came from.
  */
-declare const CODEC_ID = "kit-md@1";
+declare const CODEC_ID = "kit-md@2";
 /** `serialize(parse(markdown))` — the canonical form of a body, exactly what the editor saves. */
 declare function normalize(markdown: string): string;
 

package/dist/codec/index.js

@@ -74,16 +74,57 @@ import { directive } from "micromark-extension-directive";
 import { gfm } from "micromark-extension-gfm";
 import { cjkFriendlyExtension } from "micromark-extension-cjk-friendly";
 import { frontmatter } from "micromark-extension-frontmatter";
+import { math } from "micromark-extension-math";
 import { frontmatterFromMarkdown, frontmatterToMarkdown } from "mdast-util-frontmatter";
+import { mathFromMarkdown, mathToMarkdown } from "mdast-util-math";
 import { directiveFromMarkdown } from "mdast-util-directive";
 import { gfmFromMarkdown, gfmToMarkdown } from "mdast-util-gfm";
 function micromarkExtensions() {
   const [container] = directive().flow[58];
   const containerOnly = { flow: { 58: container } };
-  return [gfm(), cjkFriendlyExtension(), frontmatter(["yaml"]), containerOnly];
+  return [gfm(), cjkFriendlyExtension(), frontmatter(["yaml"]), dollarMath(), containerOnly];
+}
+var DOLLAR = 36;
+var isSpace = (code) => code === null || code === void 0 || code < 0 || code === 32;
+var isDigit = (code) => code != null && code >= 48 && code <= 57;
+var BACKSLASH = 92;
+function dollarMath() {
+  const extension = math();
+  const text2 = extension.text[DOLLAR];
+  const tokenize = function(effects, ok, nok) {
+    const codes = [];
+    let done = false;
+    const finish = (code) => {
+      done = true;
+      const single = codes[1] !== DOLLAR;
+      const after = codes[codes.length - 1];
+      const before = codes[codes.length - 3];
+      const refused = isSpace(codes[1]) || isSpace(before) || before === BACKSLASH || isDigit(after);
+      if (single && refused) return nok(code);
+      return ok(code);
+    };
+    const watch = (state) => (code) => {
+      if (done) return state(code);
+      codes.push(code);
+      const next = state(code);
+      return next && !done ? watch(next) : next;
+    };
+    return watch(
+      text2.tokenize.call(this, effects, finish, (code) => {
+        done = true;
+        return nok(code);
+      })
+    );
+  };
+  return { ...extension, text: { [DOLLAR]: { ...text2, tokenize } } };
 }
 function fromMarkdownExtensions() {
-  return [gfmFromMarkdown(), directiveFromMarkdown(), frontmatterFromMarkdown(["yaml"])];
+  return [
+    gfmFromMarkdown(),
+    directiveFromMarkdown(),
+    frontmatterFromMarkdown(["yaml"]),
+    mathFromMarkdown()
+  ];
 }
 var WIDE = /[\u1100-\u115F\u2E80-\u303E\u3041-\u33FF\u3400-\u4DBF\u4E00-\u9FFF\uA000-\uA4CF\uAC00-\uD7A3\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFF60\uFFE0-\uFFE6\u{1F300}-\u{1F64F}\u{1F900}-\u{1F9FF}\u{20000}-\u{3FFFD}]/u;
 function displayWidth(value) {
@@ -97,6 +138,9 @@ function toMarkdownGfm() {
 function toMarkdownFrontmatter() {
   return frontmatterToMarkdown(["yaml"]);
 }
+function toMarkdownMath() {
+  return mathToMarkdown();
+}
 
 // src/codec/options.ts
 function containerDirective(node, _, state, info) {
@@ -136,6 +180,7 @@ function toMarkdownOptions() {
     extensions: [
       toMarkdownGfm(),
       toMarkdownFrontmatter(),
+      toMarkdownMath(),
       { handlers: { containerDirective } }
     ]
   };
@@ -187,9 +232,22 @@ function withMarks(node, marks) {
 function leafText(value, marks) {
   return marks.length ? { type: "text", text: value, marks } : { type: "text", text: value };
 }
+function inlineMathSource(value, after) {
+  let size = /^\s|[\s\\]$/.test(value) || /^\d/.test(after) ? 2 : 1;
+  const runs = new Set([...value.matchAll(/\$+/g)].map((run) => run[0].length));
+  while (runs.has(size)) size++;
+  const fence = "$".repeat(size);
+  const pad = /^\$|\$$/.test(value) || /^\s[^]*\s$/.test(value) ? " " : "";
+  return `${fence}${pad}${value}${pad}${fence}`;
+}
 function inline(nodes, marks = []) {
-  return nodes.flatMap((node) => {
+  return nodes.flatMap((node, index) => {
     switch (node.type) {
+      case "inlineMath": {
+        const next = nodes[index + 1];
+        const source = inlineMathSource(node.value, next?.type === "text" ? next.value : "");
+        return [withMarks({ type: "rawInline", attrs: { source } }, marks)];
+      }
       case "text":
         return text(node.value, marks);
       case "emphasis":
@@ -562,19 +620,33 @@ function decodeAttentionReferences(markdown) {
   }
   return out;
 }
+function decodeDollarEscapes(markdown) {
+  if (!markdown.includes("\\$")) return markdown;
+  const target = JSON.stringify(parse(markdown));
+  const all = markdown.replace(/\\\$/g, "$");
+  if (JSON.stringify(parse(all)) === target) return all;
+  let out = markdown;
+  for (const escape of [...markdown.matchAll(/\\\$/g)].reverse()) {
+    const at = escape.index;
+    const candidate = out.slice(0, at) + out.slice(at + 1);
+    if (JSON.stringify(parse(candidate)) === target) out = candidate;
+  }
+  return out;
+}
 function serialize(doc) {
   const root = { type: "root", children: flow(doc.content ?? []) };
   const markdown = toMarkdown2(root, toMarkdownOptions());
   if (markdown.trim() === "") return "";
   const tidy = markdown.replace(/\n{3,}/g, "\n\n").replace(/^\n+/, "").replace(/\n+$/, "\n");
-  return decodeAttentionReferences(tidy);
+  return decodeDollarEscapes(decodeAttentionReferences(tidy));
 }
 
 // src/codec/outline.ts
 import GithubSlugger from "github-slugger";
 import { visit } from "unist-util-visit";
 function textOf(node) {
-  if (node.type === "text" || node.type === "inlineCode" || node.type === "html") return node.value;
+  if (node.type === "text" || node.type === "inlineCode" || node.type === "inlineMath" || node.type === "html")
+    return node.value;
   if (node.type === "image" || node.type === "imageReference") return "";
   if ("children" in node) return node.children.map(textOf).join("");
   return "";
@@ -594,7 +666,7 @@ function frontmatterOf(markdown) {
 }
 
 // src/codec/index.ts
-var CODEC_ID = "kit-md@1";
+var CODEC_ID = "kit-md@2";
 function normalize(markdown) {
   return serialize(parse(markdown));
 }

package/dist/index.d.ts

@@ -37,6 +37,9 @@ declare function rehypeHeadingIds(options?: {
  * - `protocols`: links and images allow only `http`, `https`, `mailto` (links) and relative URLs.
  *   `javascript:`, `data:`, `vbscript:` and every other scheme are dropped.
  * - Task-list checkboxes stay `disabled` (the default): ticking one would be a write to the body.
+ * - KaTeX's output (math.ts `katexSchema`: MathML, its own classes, geometry-only inline styles,
+ *   `svg` paths for radicals and stretchy arrows) and the code tokens (`data-code-token`, the kit's
+ *   twelve names) — both produced by the pipeline before this schema judges them (renderer v6).
  *
  * Hosts extend it with `extendSchema`, never by editing a copy.
  */
@@ -77,7 +80,7 @@ type PluggableList = NonNullable<Options$1["remarkPlugins"]>;
  * differently — a schema change, a new default plugin — not on every release.
  */
 declare const MARKDOWN_FORMAT = "md";
-declare const RENDERER_VERSION = 5;
+declare const RENDERER_VERSION = 6;
 type MarkdownProps = {
     /** The Markdown source. */
     children: string;
@@ -111,6 +114,12 @@ type MarkdownProps = {
      * `pre` (or plain code) as well (gh#1116).
      */
     mermaid?: boolean;
+    /**
+     * Tokenise fenced code in a known language as `<span data-code-token="keyword">` … (default
+     * true), which `Prose` colours. `false` leaves the code as plain text — a host `pre` that runs
+     * its own highlighter.
+     */
+    highlight?: boolean;
     /**
      * NARROW the elements a body may produce — an activity feed that shows only inline formatting.
      * react-markdown's own options, applied after the sanitiser; they can only remove, never allow
@@ -149,7 +158,7 @@ type MarkdownProps = {
 };
 /**
  * THE ONE RENDERER (gh#1108). GFM — tables, task lists, fenced code, autolinks, footnotes,
- * strikethrough — plus heading anchors, sanitised by `markdownSchema`, with ```mermaid drawn only
+ * strikethrough — plus heading anchors, KaTeX math, highlighted code, sanitised by `markdownSchema`, with ```mermaid drawn only
  * through the SVG gate. Raw HTML in the source is never parsed into elements (no `rehype-raw`): it
  * stays visible text. Output matches `react-markdown` + `remark-gfm` + `rehype-sanitize`, which is
  * what godx-task and godx-content rendered before, so the swap is drop-in.
@@ -157,7 +166,7 @@ type MarkdownProps = {
  * Renders bare elements; the host wraps it (`<Prose>` from `@godxjp/ui/data-display`), so this
  * package carries no UI-kit dependency.
  */
-declare function Markdown({ children, remarkPlugins, rehypePlugins, schema, components, resolveUrl, headingId, mermaid, allowedElements, disallowedElements, allowElement, unwrapDisallowed, shortCellLength, calloutTitles, externalLinks, origin, }: MarkdownProps): React.JSX.Element;
+declare function Markdown({ children, remarkPlugins, rehypePlugins, schema, components, resolveUrl, headingId, mermaid, highlight, allowedElements, disallowedElements, allowElement, unwrapDisallowed, shortCellLength, calloutTitles, externalLinks, origin, }: MarkdownProps): React.JSX.Element;
 
 type MermaidSvgCheck = {
     ok: true;

package/dist/index.js

@@ -5,7 +5,7 @@ import * as React3 from "react";
 import ReactMarkdown from "react-markdown";
 import rehypeSanitize from "rehype-sanitize";
 import remarkGfm from "remark-gfm";
-import { visit as visit2 } from "unist-util-visit";
+import { visit as visit3 } from "unist-util-visit";
 
 // src/headings.ts
 import GithubSlugger from "github-slugger";
@@ -32,6 +32,210 @@ function rehypeHeadingIds(options = {}) {
   };
 }
 
+// src/highlight.ts
+import { createLowlight } from "lowlight";
+import bash from "highlight.js/lib/languages/bash";
+import css from "highlight.js/lib/languages/css";
+import diff from "highlight.js/lib/languages/diff";
+import dockerfile from "highlight.js/lib/languages/dockerfile";
+import go from "highlight.js/lib/languages/go";
+import ini from "highlight.js/lib/languages/ini";
+import java from "highlight.js/lib/languages/java";
+import javascript from "highlight.js/lib/languages/javascript";
+import json from "highlight.js/lib/languages/json";
+import markdown from "highlight.js/lib/languages/markdown";
+import php from "highlight.js/lib/languages/php";
+import python from "highlight.js/lib/languages/python";
+import rust from "highlight.js/lib/languages/rust";
+import shell from "highlight.js/lib/languages/shell";
+import sql from "highlight.js/lib/languages/sql";
+import typescript from "highlight.js/lib/languages/typescript";
+import xml from "highlight.js/lib/languages/xml";
+import yaml from "highlight.js/lib/languages/yaml";
+import { visit as visit2 } from "unist-util-visit";
+var lowlight = createLowlight({
+  bash,
+  css,
+  diff,
+  dockerfile,
+  go,
+  ini,
+  java,
+  javascript,
+  json,
+  markdown,
+  php,
+  python,
+  rust,
+  shell,
+  sql,
+  typescript,
+  xml,
+  yaml
+});
+var CODE_TOKENS = [
+  "comment",
+  "keyword",
+  "string",
+  "string-expression",
+  "function",
+  "constant",
+  "parameter",
+  "punctuation",
+  "link",
+  "inserted",
+  "deleted",
+  "changed"
+];
+var SCOPES = {
+  comment: "comment",
+  quote: "comment",
+  doctag: "keyword",
+  keyword: "keyword",
+  built_in: "keyword",
+  type: "keyword",
+  "selector-tag": "keyword",
+  tag: "punctuation",
+  name: "keyword",
+  section: "keyword",
+  string: "string",
+  char: "string",
+  regexp: "string-expression",
+  subst: "string-expression",
+  "template-variable": "string-expression",
+  "title.function": "function",
+  title: "function",
+  "title.class": "constant",
+  number: "constant",
+  literal: "constant",
+  symbol: "constant",
+  "variable.constant": "constant",
+  "variable.language": "constant",
+  "selector-id": "constant",
+  "selector-class": "constant",
+  bullet: "constant",
+  params: "parameter",
+  attr: "parameter",
+  attribute: "parameter",
+  property: "parameter",
+  "template-tag": "parameter",
+  punctuation: "punctuation",
+  operator: "punctuation",
+  link: "link",
+  addition: "inserted",
+  deletion: "deleted"
+};
+function tokenOf(className) {
+  if (!Array.isArray(className) || !String(className[0]).startsWith("hljs-")) return void 0;
+  const parts = className.map(
+    (name, i) => i === 0 ? String(name).slice(5) : String(name).replace(/_+$/, "")
+  );
+  for (let n = parts.length; n > 0; n--) {
+    const token = SCOPES[parts.slice(0, n).join(".")];
+    if (token) return token;
+  }
+  return void 0;
+}
+function retag(nodes) {
+  return nodes.flatMap((node) => {
+    if (node.type !== "element") return [node];
+    const children = retag(node.children);
+    const token = tokenOf(node.properties?.className);
+    return token ? [{ type: "element", tagName: "span", properties: { dataCodeToken: token }, children }] : children;
+  });
+}
+var SKIP = /* @__PURE__ */ new Set(["mermaid", "math"]);
+function rehypeHighlight() {
+  return (tree) => {
+    visit2(tree, "element", (node, _index, parent) => {
+      if (node.tagName !== "code" || parent?.type !== "element" || parent.tagName !== "pre") return;
+      const classes = node.properties?.className ?? [];
+      const language = classes.find((name) => name.startsWith("language-"))?.slice(9);
+      if (!language || SKIP.has(language) || !lowlight.registered(language)) return;
+      if (!node.children.every((child) => child.type === "text")) return;
+      const text = node.children.map((child) => child.type === "text" ? child.value : "").join("");
+      node.children = retag(lowlight.highlight(language, text).children);
+    });
+  };
+}
+
+// src/math.ts
+import rehypeKatex from "rehype-katex";
+var KATEX_OPTIONS = {
+  trust: false,
+  strict: "error",
+  maxSize: 10,
+  output: "htmlAndMathml"
+};
+function rehypeMath() {
+  return rehypeKatex(KATEX_OPTIONS);
+}
+var KATEX_CLASSES = `accent accent-body accent-full amsrm angl anglpad arraycolsep base boldsymbol
+boxpad brace-center brace-left brace-right cancel-lap cancel-pad cd-arrow-pad cd-label-left
+cd-label-right cd-vert-arrow cjk_fallback clap col-align-c col-align-l col-align-r colorbox com
+delim-size1 delim-size4 delimcenter delimsizing eqn-num fbox fcolorbox fix fleqn fontsize-ensurer
+frac-line halfarrow-left halfarrow-right hbox hdashline hide-tail hline inner katex katex-display
+katex-error katex-html katex-mathml large-op leqno llap mainrm mathbb mathbf mathboldfrak mathboldsf
+mathcal mathfrak mathit mathitsf mathnormal mathrm mathscr mathsf mathsfit mathtt mbin mclose mfrac
+minner mml-eqn-num mop mopen mord mover mpunct mrel mspace msupsub mtable mtight mtr-glue mult
+munder newline nobreak nulldelimiter op-limits op-symbol overlay overline overline-line pstrut
+reset-size1 reset-size10 reset-size11 reset-size2 reset-size3 reset-size4 reset-size5 reset-size6
+reset-size7 reset-size8 reset-size9 rlap root rule size1 size10 size11 size2 size3 size4 size5
+size6 size7 size8 size9 sizing small-op smash sout sqrt stretchy strut svg-align tag text textbb
+textbf textboldfrak textboldsf textfrak textit textitsf textrm textscr textsf texttt thinbox
+underline underline-line vbox vertical-separator vlist vlist-r vlist-s vlist-t vlist-t2 x-arrow
+x-arrow-pad`.split(/\s+/);
+var KATEX_STYLE = /^(?:\s*(?:background-color|border(?:-(?:top|right|bottom|left))?(?:-(?:width|style|color))?|bottom|color|height|left|margin(?:-(?:top|right|bottom|left))?|max-width|min-width|padding(?:-(?:top|right|bottom|left))?|position|right|top|vertical-align|width)\s*:\s*[-#.%\w ]+;?)*\s*$/i;
+var MATHML_TAGS = `math semantics annotation mrow mi mn mo ms mtext mspace mpadded mphantom mstyle
+menclose mfrac msqrt mroot msub msup msubsup munder mover munderover mtable mtr mtd mlabeledtr`.split(
+  /\s+/
+);
+var katexSchema = {
+  tagNames: [...MATHML_TAGS, "svg", "path", "line"],
+  attributes: {
+    span: [
+      ["className", ...KATEX_CLASSES],
+      ["style", KATEX_STYLE],
+      ["ariaHidden", "true"]
+    ],
+    math: [
+      ["xmlns", "http://www.w3.org/1998/Math/MathML"],
+      ["display", "block", "inline"]
+    ],
+    annotation: [["encoding", "application/x-tex"]],
+    mi: ["mathvariant"],
+    mo: ["stretchy", "fence", "separator", "minsize", "maxsize", "lspace", "rspace", "accent"],
+    mfrac: ["linethickness"],
+    mtable: ["rowspacing", "rowlines", "columnalign", "columnspacing", "columnlines", "width"],
+    mtd: ["columnalign"],
+    mstyle: ["scriptlevel", "displaystyle", "mathcolor", "mathsize", "mathbackground"],
+    mover: ["accent"],
+    munder: ["accentunder"],
+    munderover: ["accent", "accentunder"],
+    mpadded: [
+      "width",
+      "height",
+      "depth",
+      "lspace",
+      "voffset",
+      "mathbackground",
+      ["style", KATEX_STYLE]
+    ],
+    mspace: ["width", "height", "depth", "mathbackground"],
+    menclose: ["notation", "mathbackground"],
+    svg: [
+      ["xmlns", "http://www.w3.org/2000/svg"],
+      "width",
+      "height",
+      "viewBox",
+      "preserveAspectRatio",
+      ["style", KATEX_STYLE]
+    ],
+    path: ["d"],
+    line: ["x1", "y1", "x2", "y2", "strokeWidth"]
+  }
+};
+
 // src/mermaid.tsx
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -90,8 +294,8 @@ function checkMermaidSvg(svg) {
     const name = element2.localName.toLowerCase();
     if (!ALLOWED_ELEMENTS.has(name)) return { ok: false, reason: `element ${name}` };
     if (name === "style") {
-      const css = element2.textContent ?? "";
-      if (CSS_HAZARD.test(css) || !urlsAreLocal(css)) return { ok: false, reason: "style" };
+      const css2 = element2.textContent ?? "";
+      if (CSS_HAZARD.test(css2) || !urlsAreLocal(css2)) return { ok: false, reason: "style" };
     }
     for (const attribute of Array.from(element2.attributes)) {
       const attr = attribute.localName.toLowerCase();
@@ -107,20 +311,26 @@ function checkMermaidSvg(svg) {
   return { ok: true, svg: root };
 }
 var loading = null;
-function loadMermaid() {
-  loading ??= import("mermaid").then((module) => {
-    const api = module.default;
+var initializedTheme = null;
+async function loadMermaid() {
+  loading ??= import("mermaid").then((module) => module.default).catch(() => null);
+  const api = await loading;
+  const theme = document.documentElement.dataset.theme === "dark" ? "dark" : "default";
+  if (api && theme !== initializedTheme) {
     api.initialize({
       startOnLoad: false,
       securityLevel: "strict",
       // SVG text labels, not HTML in <foreignObject> — which the gate rejects outright.
       htmlLabels: false,
       flowchart: { htmlLabels: false },
-      theme: document.documentElement.dataset.theme === "dark" ? "dark" : "default"
+      // Journey wraps its labels in <switch><foreignObject> by default ("element switch" at the
+      // gate, so every journey fell back to code); tspan placement draws them as SVG text.
+      journey: { textPlacement: "tspan" },
+      theme
     });
-    return api;
-  }).catch(() => null);
-  return loading;
+    initializedTheme = theme;
+  }
+  return api;
 }
 function MermaidCode({ source }) {
   return /* @__PURE__ */ jsx("pre", { "data-mermaid": "code", children: /* @__PURE__ */ jsx("code", { className: "language-mermaid", children: source }) });
@@ -188,6 +398,7 @@ function TableScroll({ children }) {
 import { defaultSchema } from "rehype-sanitize";
 var markdownSchema = {
   ...defaultSchema,
+  tagNames: [...defaultSchema.tagNames ?? [], ...katexSchema.tagNames],
   clobberPrefix: "",
   protocols: {
     ...defaultSchema.protocols,
@@ -197,6 +408,8 @@ var markdownSchema = {
   },
   attributes: {
     ...defaultSchema.attributes,
+    ...katexSchema.attributes,
+    span: [...katexSchema.attributes.span, ["dataCodeToken", ...CODE_TOKENS]],
     // Heading anchors (rehype-headings, below) and the code fence language.
     h1: [...defaultSchema.attributes?.h1 ?? [], "id"],
     h2: [...defaultSchema.attributes?.h2 ?? [], "id"],
@@ -340,16 +553,57 @@ import { directive } from "micromark-extension-directive";
 import { gfm } from "micromark-extension-gfm";
 import { cjkFriendlyExtension } from "micromark-extension-cjk-friendly";
 import { frontmatter } from "micromark-extension-frontmatter";
+import { math } from "micromark-extension-math";
 import { frontmatterFromMarkdown, frontmatterToMarkdown } from "mdast-util-frontmatter";
+import { mathFromMarkdown, mathToMarkdown } from "mdast-util-math";
 import { directiveFromMarkdown } from "mdast-util-directive";
 import { gfmFromMarkdown, gfmToMarkdown } from "mdast-util-gfm";
 function micromarkExtensions() {
   const [container] = directive().flow[58];
   const containerOnly = { flow: { 58: container } };
-  return [gfm(), cjkFriendlyExtension(), frontmatter(["yaml"]), containerOnly];
+  return [gfm(), cjkFriendlyExtension(), frontmatter(["yaml"]), dollarMath(), containerOnly];
+}
+var DOLLAR = 36;
+var isSpace = (code) => code === null || code === void 0 || code < 0 || code === 32;
+var isDigit = (code) => code != null && code >= 48 && code <= 57;
+var BACKSLASH = 92;
+function dollarMath() {
+  const extension = math();
+  const text = extension.text[DOLLAR];
+  const tokenize = function(effects, ok, nok) {
+    const codes = [];
+    let done = false;
+    const finish = (code) => {
+      done = true;
+      const single = codes[1] !== DOLLAR;
+      const after = codes[codes.length - 1];
+      const before = codes[codes.length - 3];
+      const refused = isSpace(codes[1]) || isSpace(before) || before === BACKSLASH || isDigit(after);
+      if (single && refused) return nok(code);
+      return ok(code);
+    };
+    const watch = (state) => (code) => {
+      if (done) return state(code);
+      codes.push(code);
+      const next = state(code);
+      return next && !done ? watch(next) : next;
+    };
+    return watch(
+      text.tokenize.call(this, effects, finish, (code) => {
+        done = true;
+        return nok(code);
+      })
+    );
+  };
+  return { ...extension, text: { [DOLLAR]: { ...text, tokenize } } };
 }
 function fromMarkdownExtensions() {
-  return [gfmFromMarkdown(), directiveFromMarkdown(), frontmatterFromMarkdown(["yaml"])];
+  return [
+    gfmFromMarkdown(),
+    directiveFromMarkdown(),
+    frontmatterFromMarkdown(["yaml"]),
+    mathFromMarkdown()
+  ];
 }
 
 // src/directives.ts
@@ -432,7 +686,7 @@ function directive2(node, nested) {
 // src/markdown.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 var MARKDOWN_FORMAT = "md";
-var RENDERER_VERSION = 5;
+var RENDERER_VERSION = 6;
 var URL_ATTRIBUTES = {
   a: "href",
   img: "src",
@@ -442,7 +696,7 @@ var URL_ATTRIBUTES = {
 function rehypeResolveUrls(options) {
   return (tree) => {
     if (!options.resolve) return;
-    visit2(tree, "element", (node) => {
+    visit3(tree, "element", (node) => {
       const key = URL_ATTRIBUTES[node.tagName];
       const value = key ? node.properties?.[key] : void 0;
       if (typeof value !== "string") return;
@@ -455,7 +709,7 @@ var graphemes = typeof Intl !== "undefined" && "Segmenter" in Intl ? new Intl.Se
 function textOf2(node) {
   let text = "";
   let hasImage = false;
-  visit2(node, (child) => {
+  visit3(node, (child) => {
     if (child.type === "text") text += child.value;
     else if (child.type === "element" && child.tagName === "img") hasImage = true;
   });
@@ -465,7 +719,7 @@ function rehypeShortCells(options) {
   return (tree) => {
     const { max } = options;
     if (max === false || max <= 0) return;
-    visit2(tree, "element", (node) => {
+    visit3(tree, "element", (node) => {
       if (node.tagName !== "td" && node.tagName !== "th") return;
       const { text, hasImage } = textOf2(node);
       const token = text.trim();
@@ -479,7 +733,7 @@ function rehypeExternalLinks(options) {
   return (tree) => {
     if (options.policy !== "new-tab") return;
     const origin = options.origin ?? globalThis.location?.origin;
-    visit2(tree, "element", (node) => {
+    visit3(tree, "element", (node) => {
       if (node.tagName !== "a") return;
       const href = node.properties?.href;
       if (typeof href !== "string" || !/^https?:\/\//i.test(href)) return;
@@ -515,6 +769,7 @@ function Markdown({
   resolveUrl,
   headingId,
   mermaid = true,
+  highlight = true,
   allowedElements,
   disallowedElements,
   allowElement,
@@ -548,6 +803,9 @@ function Markdown({
       rehypePlugins: [
         [rehypeResolveUrls, { resolve: resolveUrl }],
         [rehypeHeadingIds, { resolve: headingId }],
+        // Both BEFORE the sanitiser, which judges their output (schema.ts).
+        rehypeMath,
+        ...highlight ? [rehypeHighlight] : [],
         [rehypeSanitize, sanitizeSchema],
         [rehypeShortCells, { max: shortCellLength }],
         [rehypeExternalLinks, { policy: externalLinks, origin }],
@@ -589,9 +847,9 @@ var MARKDOWN_FIXTURES = [
     html: '<ul class="contains-task-list">\n<li class="task-list-item"><input type="checkbox" disabled="" checked=""/> done</li>\n<li class="task-list-item"><input type="checkbox" disabled=""/> todo</li>\n</ul>'
   },
   {
-    name: "fenced code keeps its language class",
+    name: "fenced code keeps its language class, tokenised (renderer v6)",
     markdown: "```ts\nconst a = 1;\n```",
-    html: '<pre><code class="language-ts">const a = 1;\n</code></pre>'
+    html: '<pre><code class="language-ts"><span data-code-token="keyword">const</span> a = <span data-code-token="constant">1</span>;\n</code></pre>'
   },
   {
     name: "links and autolinks",
@@ -691,6 +949,61 @@ var MARKDOWN_FIXTURES = [
     markdown: "---\ntitle: Spec\ntags: [a]\n---\n\n# Heading\n\nBody",
     html: '<h1 id="heading">Heading</h1>\n<p>Body</p>',
     forbidden: ["title: Spec", "<hr"]
+  },
+  // Renderer v6: math (KaTeX, before the sanitiser) and syntax colour (`data-code-token`).
+  {
+    name: "inline and display math are drawn by KaTeX; `\\,` keeps its backslash",
+    markdown: "Inline $a\\,b$ and display:\n\n$$\nx^2\n$$",
+    html: '<p>Inline <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>a</mi><mtext>\u2009</mtext><mi>b</mi></mrow><annotation encoding="application/x-tex">a\\,b</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.6944em"></span><span class="mord mathnormal">a</span><span class="mspace" style="margin-right:0.1667em"></span><span class="mord mathnormal">b</span></span></span></span> and display:</p>\n<span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><msup><mi>x</mi><mn>2</mn></msup></mrow><annotation encoding="application/x-tex">x^2</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.8641em"></span><span class="mord"><span class="mord mathnormal">x</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8641em"><span style="top:-3.113em;margin-right:0.05em"><span class="pstrut" style="height:2.7em"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span></span></span></span></span>'
+  },
+  {
+    name: "a ```math fence is display math",
+    markdown: "```math\n\\frac{1}{2}\n```",
+    html: '<span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mfrac><mn>1</mn><mn>2</mn></mfrac></mrow><annotation encoding="application/x-tex">\\frac{1}{2}\n</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:2.0074em;vertical-align:-0.686em"></span><span class="mord"><span class="mopen nulldelimiter"></span><span class="mfrac"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.3214em"><span style="top:-2.314em"><span class="pstrut" style="height:3em"></span><span class="mord"><span class="mord">2</span></span></span><span style="top:-3.23em"><span class="pstrut" style="height:3em"></span><span class="frac-line" style="border-bottom-width:0.04em"></span></span><span style="top:-3.677em"><span class="pstrut" style="height:3em"></span><span class="mord"><span class="mord">1</span></span></span></span><span class="vlist-s">\u200B</span></span><span class="vlist-r"><span class="vlist" style="height:0.686em"><span></span></span></span></span></span><span class="mclose nulldelimiter"></span></span></span></span></span></span>'
+  },
+  {
+    name: "prices stay text: a single `$` follows Pandoc's rule",
+    markdown: "$5 and $10, $5-$10, \\$x\\$",
+    html: "<p>$5 and $10, $5-$10, $x$</p>",
+    forbidden: ["katex"]
+  },
+  {
+    name: "a formula that does not parse shows its source",
+    markdown: "$\\frac{1$",
+    html: '<p><span class="katex-error" title="ParseError: KaTeX parse error: Unexpected end of input in a macro argument, expected &#x27;}&#x27; at end of input: \\frac{1" style="color:#cc0000">\\frac{1</span></p>'
+  },
+  {
+    name: "KaTeX \\href, \\url and \\includegraphics stay text (trust: false)",
+    hostile: true,
+    markdown: "$\\href{javascript:alert(1)}{a}$ $\\url{https://evil.example}$ $\\includegraphics{https://evil.example/i.png}$",
+    html: '<p><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mstyle mathcolor="#cc0000"><mtext>\\href</mtext></mstyle></mrow><annotation encoding="application/x-tex">\\href{javascript:alert(1)}{a}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em"></span><span class="mord text" style="color:#cc0000"><span class="mord" style="color:#cc0000">\\href</span></span></span></span></span> <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mstyle mathcolor="#cc0000"><mtext>\\url</mtext></mstyle></mrow><annotation encoding="application/x-tex">\\url{https://evil.example}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em"></span><span class="mord text" style="color:#cc0000"><span class="mord" style="color:#cc0000">\\url</span></span></span></span></span> <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mstyle mathcolor="#cc0000"><mtext>\\includegraphics</mtext></mstyle></mrow><annotation encoding="application/x-tex">\\includegraphics{https://evil.example/i.png}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em"></span><span class="mord text" style="color:#cc0000"><span class="mord" style="color:#cc0000">\\includegraphics</span></span></span></span></span></p>',
+    forbidden: ["<a ", "href=", "<img", "src="]
+  },
+  {
+    name: "KaTeX \\htmlClass, \\htmlId, \\htmlStyle and \\htmlData stay text",
+    hostile: true,
+    markdown: "$\\htmlClass{ui-pwn}{a}$ $\\htmlId{pwn}{b}$ $\\htmlStyle{background:url(https://evil.example)}{c}$ $\\htmlData{pwn=1}{d}$",
+    html: '<p><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mstyle mathcolor="#cc0000"><mtext>\\htmlClass</mtext></mstyle></mrow><annotation encoding="application/x-tex">\\htmlClass{ui-pwn}{a}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em"></span><span class="mord text" style="color:#cc0000"><span class="mord" style="color:#cc0000">\\htmlClass</span></span></span></span></span> <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mstyle mathcolor="#cc0000"><mtext>\\htmlId</mtext></mstyle></mrow><annotation encoding="application/x-tex">\\htmlId{pwn}{b}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em"></span><span class="mord text" style="color:#cc0000"><span class="mord" style="color:#cc0000">\\htmlId</span></span></span></span></span> <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mstyle mathcolor="#cc0000"><mtext>\\htmlStyle</mtext></mstyle></mrow><annotation encoding="application/x-tex">\\htmlStyle{background:url(https://evil.example)}{c}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em"></span><span class="mord text" style="color:#cc0000"><span class="mord" style="color:#cc0000">\\htmlStyle</span></span></span></span></span> <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mstyle mathcolor="#cc0000"><mtext>\\htmlData</mtext></mstyle></mrow><annotation encoding="application/x-tex">\\htmlData{pwn=1}{d}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em"></span><span class="mord text" style="color:#cc0000"><span class="mord" style="color:#cc0000">\\htmlData</span></span></span></span></span></p>',
+    forbidden: ['class="ui-pwn"', 'id="pwn"', "data-pwn", 'style="background']
+  },
+  {
+    name: "a user-sized KaTeX box is capped at 10em",
+    hostile: true,
+    markdown: "$\\rule{9999em}{9999em}$",
+    html: '<p><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mpadded height="0em" voffset="0em"><mspace mathbackground="black" width="10em" height="10em"></mspace></mpadded></mrow><annotation encoding="application/x-tex">\\rule{9999em}{9999em}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:10em"></span><span class="mord rule" style="border-right-width:10em;border-top-width:10em;bottom:0em"></span></span></span></span></p>',
+    forbidden: ["width:9999em", 'width="9999em"']
+  },
+  {
+    name: "HTML in a highlighted fence stays text",
+    hostile: true,
+    markdown: "```html\n<script>alert(1)</script>\n```",
+    html: '<pre><code class="language-html"><span data-code-token="punctuation">&lt;<span data-code-token="keyword">script</span>&gt;</span>alert(1)<span data-code-token="punctuation">&lt;/<span data-code-token="keyword">script</span>&gt;</span>\n</code></pre>',
+    forbidden: ["<script"]
+  },
+  {
+    name: "a fence in an unknown language stays plain",
+    markdown: "```unknown\nlet a = 1\n```",
+    html: '<pre><code class="language-unknown">let a = 1\n</code></pre>'
   }
 ];
 export {

package/katex.css

@@ -0,0 +1,11 @@
+/*
+ * KaTeX's stylesheet and fonts, at the version this package renders with (renderer v6).
+ * `import "@godxjp/markdown/katex.css";` once in the app — math draws unstyled without it.
+ */
+@import "katex/dist/katex.min.css";
+
+/* A display formula wider than the column scrolls, as a wide table does, instead of widening the page. */
+.katex-display {
+  overflow-x: auto;
+  overflow-y: hidden;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/markdown",
-  "version": "33.17.0",
-  "description": "The one Markdown renderer for GoDX apps: GFM + heading anchors, one sanitiser schema, a shared fixture corpus, and Mermaid drawn only after its SVG passes a fail-closed gate.",
+  "version": "33.18.0",
+  "description": "The one Markdown renderer for GoDX apps: GFM + heading anchors, KaTeX math, highlighted code, one sanitiser schema, a shared fixture corpus, and Mermaid drawn only after its SVG passes a fail-closed gate.",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -15,11 +15,15 @@
       "types": "./dist/codec/index.d.ts",
       "import": "./dist/codec/index.js"
     },
+    "./katex.css": "./katex.css",
     "./package.json": "./package.json"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "files": [
     "dist",
+    "katex.css",
     "README.md"
   ],
   "publishConfig": {
@@ -34,17 +38,23 @@
   "license": "Apache-2.0",
   "dependencies": {
     "github-slugger": "^2.0.0",
+    "highlight.js": "~11.11.1",
+    "katex": "^0.16.47",
+    "lowlight": "^3.3.0",
     "mdast-util-directive": "^3.1.1",
     "mdast-util-from-markdown": "^2.1.0",
     "mdast-util-frontmatter": "^2.0.1",
     "mdast-util-gfm": "^3.1.0",
+    "mdast-util-math": "^3.0.0",
     "mdast-util-to-markdown": "^2.2.0",
     "micromark-extension-cjk-friendly": "^2.0.2",
     "micromark-extension-directive": "^4.0.0",
     "micromark-extension-frontmatter": "^2.0.0",
     "micromark-extension-gfm": "^3.0.0",
+    "micromark-extension-math": "^3.1.0",
     "micromark-util-types": "^2.0.2",
     "react-markdown": "^10.1.0",
+    "rehype-katex": "^7.0.1",
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.1",
     "unist-util-visit": "^5.1.0"
@@ -63,6 +73,8 @@
     "gfm",
     "sanitize",
     "mermaid",
+    "katex",
+    "highlight",
     "godxjp"
   ]
 }