Skip to content

Equation 数学公式 ​

数学公式组件(自研简化 LaTeX 子集,零第三方公式引擎),覆盖高中/大学常用公式:上下标、分数、根号、求和/积分(带上下限)、希腊字母与常用运算符。

上下标 ​

上标 / 下标

^ 上标、_ 下标,单字符 x^2 或花括号 z_{max} 均可。

分数 ​

分数

\frac{分子}{分母} 渲染为竖式分数(分子/分母上下堆叠 + 横线)。

根号 ​

根号

\sqrt{被开方数};可选根指数 \sqrt[3]{y}。

求和 / 积分 ​

求和 / 积分(带上下限)



\sum_{下限}^{上限} / \int_{下限}^{上限} 自动排版上下限。

希腊字母与运算符 ​

希腊字母 + 运算符

\alpha 等希腊字母与 \times \div \pm \cdot \leq \geq \neq \approx \infty 等常用运算符自动映射。

未知命令 ​

未知命令按字面显示

未知命令按字面显示,不报错。

块级公式 ​

display=block(独立居中行)

行间公式(独立居中、上下留白)用 display="block";字号不放大,跟随外层。

注入渲染引擎 ​

engine 注入(薄壳委托)

注入兼容 TeX 渲染引擎对象(engine property,renderToString 协议)后组件转为薄壳委托渲染——本 demo 用 mock 引擎演示协议(虚线框即引擎产物)。零依赖场景不注入即走自研子集。

引擎路径与自研路径的边界:

  • DOM:引擎产物以 innerHTML 直出(引擎自带类名/字体在其内部生效);自研路径为 span 堆叠 + CSS 排版。两条路径 aria-label 均为原始 LaTeX。
  • 错误态:均为静默降级——自研未知命令按字面显示;引擎渲染抛错自动回退自研子集渲染,不空白。
  • SSR:快照只走属性通道(attribute),engine 是 property——SSR 输出恒为自研子集渲染;需要引擎 SSR 时宿主在服务端注入同一引擎对象。

字号定制 ​

字号默认跟随外层 font-size(继承),可用 CSS 变量 --oas-equation-font 显式定制(如 18px)。

API ​

oas-equation ​

属性 ​

属性说明类型默认值
codeLaTeX 子集源文本string—
display显示模式:inline(默认,随文)/ block(独立居中块,margin-block 间距)string—

CSS 变量 ​

CSS 变量默认值
--oas-equation-block-marginvar(--oas-space-4)
--oas-equation-fontinherit

ARIA ​

容器 aria-label = 原始 LaTeX 源文本,屏幕阅读器直接朗读公式源。

边界 ​

  • 文本全部 HTML 转义,杜绝注入
  • 空 code 渲染空容器,不报错

基于 MIT OR Apache-2.0 双许可发布