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

[x-at-01]

For fully offline, no-CDN math rendering without massive font/CSS bundles, KaTeX is still somewhat heavy (requiring 75KB JS + large font files and CSS sheets to package).

I wrote @webc.site/math (GitHub: https://github.com/webc-site/math, Live Demo: https://math.webc.site) — the world's smallest and fastest TeX-to-MathML compiler.

Here are the benchmarks:

• Size: Only 3.58 KB (Gzipped, zero dependencies), making it extremely easy to bundle and distribute fully offline.
• Speed: ~329,000 ops/s (about 3.6x faster than KaTeX / 48x faster than MathJax).

Instead of shipping heavy layout scripts and custom fonts, it compiles LaTeX directly to browser-native MathML Core (standard <math> tags). Since modern browsers natively support MathML, it works fully offline with zero CDN dependencies and no external font loading, providing a super clean markup.