KaTeX math rendering ($...$ and $$...$$)

[SyNeto]

Goal

Render inline ($...$) and display ($$...$$) math expressions using KaTeX, fully offline, no CDN.

Why

Math notation in technical/academic Markdown is unreadable as raw $ delimiters. KaTeX is the de-facto offline math renderer — fast, no MathJax-style DOM cost.

Proposed approach

• npm install --save-dev katex — KaTeX ships its own types, no @types/katex needed.
• Import directly in src/content.ts:

  import katex from 'katex';

  Rollup will bundle it into content.bundle.js automatically.
• Vendor the KaTeX CSS and fonts (KaTeX_*.woff2) — copy them to dist/<browser>/vendor/katex/ as part of the build copy step.
• Declare font files in web_accessible_resources of both manifests so the CSS can resolve them via chrome-extension://... URLs.
• Integrate as a marked extension (or pre/post-process pass) that scans for $ and $$ delimiters and replaces matches with KaTeX-rendered HTML before or after marked.parse().

Constraints

• No CDN. Everything bundled locally. Fonts must NOT load from cdnjs, unpkg, or any external host.
• KaTeX CSS url(...) references must point to chrome.runtime.getURL('vendor/katex/...') — rewrite at build time or inject a <style> block at runtime.

Acceptance criteria

• $E = mc^2$ renders inline math
• $$\int_a^b f(x)dx$$ renders display math
• No network requests issued by KaTeX (verify in DevTools Network tab)
• Works on file:/// pages
• No regression on docs without math