@webc.site/math 0.1.21 → 0.1.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +57 -74
- package/package.json +1 -32
package/README.md
CHANGED
|
@@ -6,30 +6,15 @@
|
|
|
6
6
|
|
|
7
7
|
# @webc.site/math : The world's smallest and fastest web Markdown formula renderer
|
|
8
8
|
|
|
9
|
-
- [@webc.site/math : The world's smallest and fastest web Markdown formula renderer](#webcsitemath-the-worlds-smallest-and-fastest-web-markdown-formula-renderer)
|
|
10
|
-
- [1. Features](#1-features)
|
|
11
|
-
- [2. Usage](#2-usage)
|
|
12
|
-
- [Compilation Examples](#compilation-examples)
|
|
13
|
-
- [Render TeX Formulas Directly](#render-tex-formulas-directly)
|
|
14
|
-
- [Replace Formulas in Markdown Text](#replace-formulas-in-markdown-text)
|
|
15
|
-
- [Font and CSS Configuration](#font-and-css-configuration)
|
|
16
|
-
- [CSS Font Styling](#css-font-styling)
|
|
17
|
-
- [3. Design](#3-design)
|
|
18
|
-
- [4. Tech Stack](#4-tech-stack)
|
|
19
|
-
- [5. Code Structure](#5-code-structure)
|
|
20
|
-
- [6. Historical Background](#6-historical-background)
|
|
21
|
-
|
|
22
9
|
## 1. Features
|
|
23
10
|
|
|
24
|
-
This project compiles LaTeX math formulas into browser-native MathML Core markup
|
|
25
|
-
|
|
26
|
-
Key Features:
|
|
11
|
+
This project compiles LaTeX math formulas into browser-native MathML Core markup, achieving zero-overhead rendering without client-side layout engines.
|
|
27
12
|
|
|
28
|
-
- **High Performance**: Compiles TeX formulas directly to native MathML. Processing speed
|
|
29
|
-
- **
|
|
30
|
-
- **Zero Runtime
|
|
31
|
-
- **Robust Fault Tolerance**:
|
|
32
|
-
- **
|
|
13
|
+
- **High Performance**: Compiles TeX formulas directly to native MathML. Processing speed reaches ~329,000 operations per second, which is approximately 3.6 times faster than KaTeX and 48 times faster than MathJax.
|
|
14
|
+
- **Ultra-lightweight**: The package size is 7.78 KB (3.58 KB gzipped), minimizing initial page load times.
|
|
15
|
+
- **Zero Runtime Dependencies**: Renders math using the browser's native C++ layout engine instead of loading heavy client-side JavaScript formatting libraries.
|
|
16
|
+
- **Robust Fault Tolerance**: Automatically catches syntax errors like unclosed brackets, reverting to raw TeX string output to prevent application crashes.
|
|
17
|
+
- **Universal Compatibility**: Generates standard MathML tags suitable for Server-Side Rendering (SSR), Static Site Generation (SSG), and Client-Side Rendering (CSR).
|
|
33
18
|
|
|
34
19
|
## 2. Usage
|
|
35
20
|
|
|
@@ -40,8 +25,7 @@ Key Features:
|
|
|
40
25
|
```javascript
|
|
41
26
|
import mathml from "@webc.site/math";
|
|
42
27
|
|
|
43
|
-
|
|
44
|
-
const html = mathml("e^{i\\pi} + 1 = 0", true);
|
|
28
|
+
const html = mathml("e^{i\\pi} + 1 = 0", true); // Second parameter sets block style
|
|
45
29
|
```
|
|
46
30
|
|
|
47
31
|
#### Replace Formulas in Markdown Text
|
|
@@ -55,7 +39,7 @@ const html = mdMath("Euler's identity: $$e^{i\\pi} + 1 = 0$$", compile);
|
|
|
55
39
|
|
|
56
40
|
### Font and CSS Configuration
|
|
57
41
|
|
|
58
|
-
|
|
42
|
+
To ensure optimal layout and typesetting, configure math fonts. It is recommended to use the OpenType **Latin Modern Math** font from the `18s` package.
|
|
59
43
|
|
|
60
44
|
#### CSS Font Styling
|
|
61
45
|
|
|
@@ -67,13 +51,24 @@ math {
|
|
|
67
51
|
|
|
68
52
|
## 3. Design
|
|
69
53
|
|
|
70
|
-
The compiler extracts TeX formulas from input Markdown text,
|
|
71
|
-
|
|
72
|
-
|
|
54
|
+
The compiler extracts TeX math formulas from input Markdown text, runs lexical and syntax analyses, and generates semantic MathML markup.
|
|
55
|
+
|
|
56
|
+
```mermaid
|
|
57
|
+
graph TD
|
|
58
|
+
Input[Input Markdown] --> Scanner[Scanner: Locates Delimiters]
|
|
59
|
+
Scanner -- Plain Text --> Buffer[Output Buffer]
|
|
60
|
+
Scanner -- TeX Formula --> Lexer[Lexer: Tokenizes Input]
|
|
61
|
+
Lexer --> Parser[Parser: Builds AST]
|
|
62
|
+
Parser --> Codegen[Codegen: Translates to MathML Tags]
|
|
63
|
+
Codegen --> Wrapper[Semantic Wrapper]
|
|
64
|
+
Wrapper --> MathML[MathML Output]
|
|
65
|
+
Buffer --> Output[Final HTML]
|
|
66
|
+
MathML --> Output
|
|
67
|
+
```
|
|
73
68
|
|
|
74
69
|
## 4. Tech Stack
|
|
75
70
|
|
|
76
|
-
- **
|
|
71
|
+
- **Runtime**: Bun, Node.js
|
|
77
72
|
- **Linter & Formatter**: oxlint, oxfmt
|
|
78
73
|
- **Build Tool**: Vite, Rolldown, Lightning CSS
|
|
79
74
|
|
|
@@ -87,55 +82,37 @@ The compiler extracts TeX formulas from input Markdown text, tokenizes and parse
|
|
|
87
82
|
│ ├── mathml.js # Core compiler (minified)
|
|
88
83
|
│ └── md.js # Markdown math formula parser (minified)
|
|
89
84
|
├── src/ # Source code
|
|
90
|
-
│ ├── const/ # Tokens, AST types, symbols
|
|
85
|
+
│ ├── const/ # Tokens, AST types, symbols and functions constants
|
|
91
86
|
│ ├── lex.js # LaTeX lexer
|
|
92
87
|
│ ├── parse.js # LaTeX parser (AST builder)
|
|
93
88
|
│ ├── mathml.js # Core TeX-to-MathML compiler
|
|
94
89
|
│ └── md.js # Markdown parser entry
|
|
95
90
|
├── sh/ # Scripts
|
|
91
|
+
│ └── bench/ # Benchmark suites and historical data
|
|
96
92
|
└── test.sh # Quality verification and test runner
|
|
97
93
|
```
|
|
98
94
|
|
|
99
95
|
## 6. Historical Background
|
|
100
96
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
In 2013, the Chromium team removed the unfinished MathML rendering implementation from the Blink engine due to maintenance costs and security vulnerabilities. Web developers subsequently relied on client-side JavaScript libraries (such as MathJax and KaTeX) to simulate formula layout. These libraries increased bundle sizes and consumed client-side CPU resources, impacting page load times and rendering performance.
|
|
104
|
-
|
|
105
|
-
To resolve this issue, organizations like Igalia and Mozilla refactored the specification into the MathML Core standard, focusing on essential, implementable parts backed by Web Platform Tests.
|
|
106
|
-
|
|
107
|
-
In January 2023, Chrome 109 reintroduced support for the MathML Core specification. With Blink, Gecko, and WebKit all natively supporting this subset, web browsers achieved consistent native MathML rendering. This project compiles TeX directly to native MathML markup at compile time, eliminating client-side layout engines and avoiding client-side rendering overhead.
|
|
97
|
+
In the early history of the World Wide Web Consortium (W3C), MathML was proposed as a standard for mathematical notation in HTML5. However, implementation complexity caused fragmented support across browser engines. Chromium removed its initial MathML code in 2013 due to architectural and security issues, forcing web applications to load large, heavy layout libraries such as MathJax or KaTeX to calculate page styles and position symbols.
|
|
108
98
|
|
|
99
|
+
A decade later, in January 2023, Chrome 109 reintroduced native support for the MathML Core specification, which defines a subset of MathML optimized for browser performance. With WebKit (Safari), Gecko (Firefox), and Blink (Chrome/Edge) all supporting MathML Core natively, pages no longer require client-side JavaScript layout calculations. This project was created to compile LaTeX directly into native MathML tags at compile time, eliminating layout engine dependencies.
|
|
109
100
|
|
|
110
101
|
---
|
|
111
102
|
|
|
112
103
|
<a id="zh"></a>
|
|
113
|
-
# @webc.site/math : 全球最小最快的网页 Markdown 公式渲染器
|
|
114
|
-
|
|
115
|
-
- [@webc.site/math : 全球最小最快的网页 Markdown 公式渲染器](#webcsitemath-全球最小最快的网页-markdown-公式渲染器)
|
|
116
|
-
- [1. 功能介绍](#1-功能介绍)
|
|
117
|
-
- [2. 使用演示](#2-使用演示)
|
|
118
|
-
- [编译示例](#编译示例)
|
|
119
|
-
- [直接渲染 TeX 公式](#直接渲染-tex-公式)
|
|
120
|
-
- [替换 Markdown 文本中的公式](#替换-markdown-文本中的公式)
|
|
121
|
-
- [字体与 CSS 配置](#字体与-css-配置)
|
|
122
|
-
- [CSS 样式配置](#css-样式配置)
|
|
123
|
-
- [3. 设计思路](#3-设计思路)
|
|
124
|
-
- [4. 技术栈](#4-技术栈)
|
|
125
|
-
- [5. 代码结构](#5-代码结构)
|
|
126
|
-
- [6. 历史故事](#6-历史故事)
|
|
127
104
|
|
|
128
|
-
|
|
105
|
+
# @webc.site/math : 全球最小最快的网页Markdown公式渲染器
|
|
129
106
|
|
|
130
|
-
|
|
107
|
+
## 1. 功能介绍
|
|
131
108
|
|
|
132
|
-
|
|
109
|
+
项目将 LaTeX 数学公式编译为浏览器原生支持的 MathML Core 标记,无需前端排版引擎,实现零运行开销渲染。
|
|
133
110
|
|
|
134
|
-
-
|
|
135
|
-
-
|
|
136
|
-
-
|
|
137
|
-
-
|
|
138
|
-
-
|
|
111
|
+
- **高性能**:直接将 TeX 公式翻译为原生 MathML 标签。处理速度达每秒 329,000 次操作,较 KaTeX 快 3.6 倍,较 MathJax 快 48 倍。
|
|
112
|
+
- **体积小**:包体积仅 7.78 KB(Gzip 压缩后 3.58 KB),不影响页面首次加载性能。
|
|
113
|
+
- **无运行时依赖**:利用浏览器底层的 C++ 原生引擎进行布局和渲染,免去加载前端 JavaScript 排版库的步骤。
|
|
114
|
+
- **健壮容错**:自动捕获未闭合括号等语法错误,降级输出原始 TeX 字符串,防止页面程序崩溃。
|
|
115
|
+
- **通用兼容**:输出标准的 MathML 元素,适用于服务端渲染(SSR)、静态站点生成(SSG)和前端动态转换。
|
|
139
116
|
|
|
140
117
|
## 2. 使用演示
|
|
141
118
|
|
|
@@ -146,8 +123,7 @@ In January 2023, Chrome 109 reintroduced support for the MathML Core specificati
|
|
|
146
123
|
```javascript
|
|
147
124
|
import mathml from "@webc.site/math";
|
|
148
125
|
|
|
149
|
-
//
|
|
150
|
-
const html = mathml("e^{i\\pi} + 1 = 0", true);
|
|
126
|
+
const html = mathml("e^{i\\pi} + 1 = 0", true); // 第二参数设为 true 表示块级公式
|
|
151
127
|
```
|
|
152
128
|
|
|
153
129
|
#### 替换 Markdown 文本中的公式
|
|
@@ -161,9 +137,9 @@ const html = mdMath("欧拉恒等式:$$e^{i\\pi} + 1 = 0$$", compile);
|
|
|
161
137
|
|
|
162
138
|
### 字体与 CSS 配置
|
|
163
139
|
|
|
164
|
-
|
|
140
|
+
配置数学字体可确保排版美观。推荐使用 `18s` 字体包中的 **Latin Modern Math** 字体。
|
|
165
141
|
|
|
166
|
-
#### CSS
|
|
142
|
+
#### CSS 字体样式设置
|
|
167
143
|
|
|
168
144
|
```css
|
|
169
145
|
math {
|
|
@@ -173,9 +149,20 @@ math {
|
|
|
173
149
|
|
|
174
150
|
## 3. 设计思路
|
|
175
151
|
|
|
176
|
-
编译器从输入的 Markdown 文本中提取 TeX
|
|
177
|
-
|
|
178
|
-
|
|
152
|
+
编译器从输入的 Markdown 文本中提取 TeX 公式,执行词法分析和语法分析,生成对应的语义化 MathML 标记。
|
|
153
|
+
|
|
154
|
+
```mermaid
|
|
155
|
+
graph TD
|
|
156
|
+
Input[输入 Markdown] --> Scanner[扫描器: 定位定界符]
|
|
157
|
+
Scanner -- 普通文本 --> Buffer[输出缓冲区]
|
|
158
|
+
Scanner -- TeX 公式 --> Lexer[词法分析: 生成 Token]
|
|
159
|
+
Lexer --> Parser[语法分析: 生成 AST]
|
|
160
|
+
Parser --> Codegen[代码生成: 映射 MathML 标签]
|
|
161
|
+
Codegen --> Wrapper[语义包装]
|
|
162
|
+
Wrapper --> MathML[MathML 输出]
|
|
163
|
+
Buffer --> Output[最终 HTML]
|
|
164
|
+
MathML --> Output
|
|
165
|
+
```
|
|
179
166
|
|
|
180
167
|
## 4. 技术栈
|
|
181
168
|
|
|
@@ -195,20 +182,16 @@ math {
|
|
|
195
182
|
├── src/ # 源代码
|
|
196
183
|
│ ├── const/ # Token、AST 节点、符号和函数常量定义
|
|
197
184
|
│ ├── lex.js # LaTeX 词法分析器
|
|
198
|
-
│ ├── parse.js # LaTeX
|
|
185
|
+
│ ├── parse.js # LaTeX 语法分析器(生成 AST)
|
|
199
186
|
│ ├── mathml.js # TeX 至 MathML 核心编译器
|
|
200
187
|
│ └── md.js # Markdown 公式解析入口
|
|
201
188
|
├── sh/ # 脚本目录
|
|
202
|
-
└──
|
|
189
|
+
│ └── bench/ # 性能基准测试与历史数据
|
|
190
|
+
└── test.sh # 代码规范检查与测试运行脚本
|
|
203
191
|
```
|
|
204
192
|
|
|
205
193
|
## 6. 历史故事
|
|
206
194
|
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
2013 年,Chromium 团队因维护成本与安全漏洞考量,移除了 Blink 引擎中的 MathML 渲染代码。网页公式排版转为依赖第三方 JavaScript 库(如 MathJax、KaTeX)模拟公式布局。这增加了网页资源体积,并消耗客户端 CPU 资源,影响页面加载与渲染速度。
|
|
210
|
-
|
|
211
|
-
为了解决该困境,Igalia、Mozilla 等团队推动了规范的重构,形成聚焦核心、易于实现的 MathML Core 标准,并进行了 Web 平台测试。
|
|
212
|
-
|
|
213
|
-
2023 年 1 月,Chrome 109 重新支持 MathML Core 标准,Blink、Gecko 和 WebKit 三大主流浏览器引擎实现原生 MathML 渲染支持。本项目在此背景下开发,将 TeX 在构建期或服务端直接编译为原生 MathML 标记,消除客户端排版计算开销。
|
|
195
|
+
在万维网联盟(W3C)早期历史中,MathML 曾被提议为 HTML5 标准数学排版规范。但因其实现复杂度高,各浏览器引擎对该规范的支持程度参差不齐。2013 年,Chromium 项目以系统架构和安全隐患为由移除了原有的 MathML 渲染实现。导致网页渲染公式时,必须依赖 MathJax 或 KaTeX 等体积庞大的 JavaScript 排版库在前端进行复杂的样式布局和字符定位计算。
|
|
214
196
|
|
|
197
|
+
十年后,即 2023 年 1 月,Chrome 109 重新引入了对 MathML Core 标准的原生支持。该标准精简并优化了数学渲染逻辑,使其在现代浏览器引擎中表现更为高效。随着 WebKit (Safari)、Gecko (Firefox) 和 Blink (Chrome/Edge) 对 MathML Core 规范实现全面覆盖,前端不再需要引入重型的 JavaScript 排版引擎。该项目应运而生,在编译期将 LaTeX 直接转换为原生 MathML 标签,去除运行时排版库依赖。
|
package/package.json
CHANGED
|
@@ -1,32 +1 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@webc.site/math",
|
|
3
|
-
"version": "0.1.21",
|
|
4
|
-
"description": "The world's smallest and fastest web Markdown formula renderer / 全球最小最快的网页Markdown公式渲染器",
|
|
5
|
-
"keywords": [
|
|
6
|
-
"markdown",
|
|
7
|
-
"math",
|
|
8
|
-
"mathml",
|
|
9
|
-
"render",
|
|
10
|
-
"tex"
|
|
11
|
-
],
|
|
12
|
-
"homepage": "https://math.webc.site",
|
|
13
|
-
"license": "MulanPSL-2.0",
|
|
14
|
-
"author": "i18n.site@gmail.com",
|
|
15
|
-
"repository": {
|
|
16
|
-
"type": "git",
|
|
17
|
-
"url": "git+https://github.com/webc-site/math.git"
|
|
18
|
-
},
|
|
19
|
-
"type": "module",
|
|
20
|
-
"exports": {
|
|
21
|
-
".": {
|
|
22
|
-
"types": "./mathml.d.ts",
|
|
23
|
-
"default": "./mathml.js"
|
|
24
|
-
},
|
|
25
|
-
"./md.js": {
|
|
26
|
-
"types": "./md.d.ts",
|
|
27
|
-
"default": "./md.js"
|
|
28
|
-
},
|
|
29
|
-
"./*": "./*"
|
|
30
|
-
},
|
|
31
|
-
"dependencies": {}
|
|
32
|
-
}
|
|
1
|
+
{"name":"@webc.site/math","version":"0.1.22","description":"The world's smallest and fastest web Markdown formula renderer / 全球最小最快的网页Markdown公式渲染器","keywords":["markdown","math","mathml","render","tex"],"homepage":"https://math.webc.site","license":"MulanPSL-2.0","author":"i18n.site@gmail.com","repository":{"type":"git","url":"git+https://github.com/webc-site/math.git"},"type":"module","exports":{".":{"types":"./mathml.d.ts","default":"./mathml.js"},"./md.js":{"types":"./md.d.ts","default":"./md.js"},"./*":"./*"},"dependencies":{}}
|