@webc.site/math - npm
npm
Search<br>Sign UpSign In
@webc.site/math<br>0.1.13 • Public • Published an hour ago<br>Readme<br>Code Beta<br>0 Dependencies<br>0 Dependents<br>8 Versions<br>English | 中文
@webc.site/math
The world's smallest and fastest web Markdown formula renderer
Say goodbye to hundreds of KB of KaTeX/MathJax and bloated CSS/fonts! With an ultra-lightweight size of just ~4KB (Gzipped), it instantly compiles LaTeX equations into native MathML supported by all modern browsers, delivering zero-overhead, lightning-fast rendering.
Usage
JavaScript Example
Markdown Parser Plugins
CSS and Math Font Configuration
Features
Supported Syntax List
Unsupported Syntax (Non-Goals)
Error Handling and Fault Tolerance
Internal Error Codes
What is MathML?
Why Compile TeX Formulas to MathML?
Benchmark
1. Size Comparison (Gzipped)
2. Generation Speed (Ops/sec)
Design and Calling Process
Module Flow
How to Add Syntax Support
1. Constants
2. Lexer
3. Parser
4. Renderer
Tech Stack
Directory Structure
History and Background
Usage
JavaScript Example
1. Render TeX Formulas Directly
Using @webc.site/math. Compiles TeX formulas directly to MathML. Useful for implementing math rendering plugins for Markdown parsers (e.g., markdown-it, marked).
import mathml from "@webc.site/math";
const tex = "e^{i\\pi} + 1 = 0";<br>const html = mathml(tex, true); // true for block math, false/empty for inline math
2. Replace Formulas in Markdown
Using @webc.site/math/md.js. Parses Markdown text, automatically identifying and replacing inline/block equations with MathML. Pass the formula compiler (e.g. @webc.site/math) as the second argument.
import mdMath from "@webc.site/math/md.js";<br>import compile from "@webc.site/math";
const markdown = "Euler's identity: $$e^{i\\pi} + 1 = 0$$";<br>const html = mdMath(markdown, compile);
console.log(html);<br>// Output: Euler's identity: eiπ+1=0e^{i\pi} + 1 = 0
Markdown Parser Plugins
1. Marked Extension
Using @webc.site/math-marked. Automatically parses and compiles inline math ($...$) and block math ($$...$$) inside markdown parsed with marked.
import { marked } from "marked";<br>import mathMarked from "@webc.site/math-marked";
marked.use(mathMarked());
const html = marked.parse("Euler's identity: $$e^{i\\pi} + 1 = 0$$");
2. Remark Plugin
Using @webc.site/math-remark. A unified / remark plugin to transform math nodes (inlineMath and math) in the AST into native MathML HTML.
import { unified } from "unified";<br>import remarkParse from "remark-parse";<br>import remarkMath from "remark-math";<br>import mathRemark from "@webc.site/math-remark";<br>import remarkHtml from "remark-html";
const html = await unified()<br>.use(remarkParse)<br>.use(remarkMath)<br>.use(mathRemark)<br>.use(remarkHtml, { sanitize: false })<br>.process("Euler's identity: $$e^{i\\pi} + 1 = 0$$");
3. Markdown-it Plugin
Using @webc.site/math-markdown-it. A markdown-it plugin to automatically parse and compile inline math ($...$) and block math ($$...$$) into native MathML HTML.
import markdownit from "markdown-it";<br>import mathMarkdownIt from "@webc.site/math-markdown-it";
const md = markdownit().use(mathMarkdownIt);
const html = md.render("Euler's identity: $$e^{i\\pi} + 1 = 0$$");
CSS and Math Font Configuration
For browser mathematical layout engines to present beautifully typeset math equations, we highly recommend using a math font. The Latin Modern Math font provided in the 18s package is recommended (derived from Knuth's classical Computer Modern typeface, with a complete mathematical symbol set and OpenType MATH table support).
1. Online Reference (Recommended)
You can import the online font directly in your CSS:
/* Import the bundle (includes Source Han Sans t, monospace c, and math font m) */<br>@import url("//registry.npmmirror.com/18s/0.2.24/files/_.css");
Or import the math font m only:
@import url("//registry.npmmirror.com/18s/0.2.24/files/m.css");
2. Local Installation
npm install 18s
Import Local Font
Depending on your project setup, choose one of the following methods to import the font mappings (Note: do not mix JS and CSS imports in the same file):
Method 1: Import in JS/TS Entry File
// Import the bundle (includes Source Han Sans t, monospace c, and math font m)<br>import "18s/_.css";
Or import math font m only:
import "18s/m.css";
Method 2: Import in CSS Stylesheet
/* Import the bundle (includes Source Han Sans t, monospace c, and math font m) */<br>@import "18s/_.css";
Or import math font m only:
@import "18s/m.css";
3. Configure CSS Style
Set the math tag to use font family alias m (where t is Source Han Sans, optimized with font slicing for Chinese characters) in your global CSS styles:
math {<br>/* m is the math font, t is Source Han Sans (optimized with font slicing for Chinese characters to boost loading performance), sans-serif is default fallback */<br>font-family: m, t, sans-serif;
Features
Highly Complete Features : Extracted and compiled thousands of mathematical formulas from KaTeX and MathJax...