MathText
math-text行内数学排版 · 零依赖解析 LaTeX 子集(分数/根号/上下标/填空槽)并渲染成真数学版式 · 分数用 inline-flex 竖排不撑乱中文行高 · 可检索朴素文本走 mathToPlain · RSC 安全
用法
基础用法
分数上下叠放，上标下沉为角标，填空渲染成可书写的空位。
将 38 化成小数为 。
tsx
<MathText>{"将 \\frac{3}{8} 化成小数为 ____"}</MathText>题面里的混合记号
真实初中数学题面：分数 / 指数 / 角标 / 填空混排在中文正文中。
已知抛物线 y=ax2 经过点 P(2,3),则 a=34,此时 a1= 。
tsx
<MathText>{"已知抛物线 y=ax^{2},点 P(2,3) 在其上,则 a_1=____"}</MathText>并排选项
选择题四个分数选项，行高不会被撑乱。
A.19 B.59 C.169 D.809
tsx
<MathText>{"A.\\frac{1}{9} B.\\frac{5}{9} C.\\frac{16}{9} D.\\frac{80}{9}"}</MathText>根号
被开方数带上横线，避免 √a+b 的歧义；支持根指数。
a2+b2 与 38
tsx
<MathText>{"\\sqrt{a^{2}+b^{2}} 与 \\sqrt[3]{8}"}</MathText>何时用
正文里要混排数学式子时用：题干、选项、解析、公式说明。典型来源是从 PDF/Word 抽取出来的题库数据 —— 那些数据里分数是 \frac{3}{8}、指数是 x^{2}、填空是 ____，直接当纯文本渲染会得到 \frac{3}{8} 这种露馅的原始记号。
不要用它渲染整段富文本（用 Markdown）或代码（用 Code）。需要完整 LaTeX（矩阵、积分、求和、对齐环境）时本组件不够，请自行接 KaTeX —— 本组件刻意只覆盖教辅题面高频的那几样，以保持零依赖。
导入
ts
import { MathText, parseMath, mathToPlain } from "@hulianui/ui"支持的记号
| 记号 | 含义 | 例 |
|---|---|---|
\frac{a}{b} | 分数，上下叠放并画分数线 | \frac{16}{9} |
\sqrt{a} / \sqrt[n]{a} | 根号，被开方数带上横线 | \sqrt{a^{2}+b^{2}} |
^{...} 或 ^a | 上标 | x^{2}、x^2 |
_{...} 或 _a | 下标 | a_{1}、a_1 |
____ | 填空槽（2 个及以上连续下划线） | 可记作____万元 |
其余内容一律按字面文本输出。不认识的记号不会被吞掉 —— \alpha 原样显示为 \alpha，残缺的 \frac{3} 也原样保留，绝不静默丢内容。
用法
tsx
<MathText>{"将 \\frac{3}{8} 化成小数为 ____ 。"}</MathText>选项并排：
tsx
<MathText>{"A.\\frac{1}{9} B.\\frac{5}{9} C.\\frac{16}{9} D.\\frac{80}{9}"}</MathText>Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
children | string | — | 含数学记号的文本 |
blankWidth | number | 2.5 | 填空槽最小宽度（em） |
scriptScale | number | 0.75 | 上下标相对字号 |
className | string | — | — |
配套纯函数
parseMath(src)→MathNode[]，解析结果，可用于自定义渲染或做结构校验。mathToPlain(src)→string，转成朴素文本（\frac{3}{8}→3/8）。
检索、导出、纯文本比对一律用 `mathToPlain`，不要把带记号的原串直接甩给搜索框 —— 用户搜「3/8」应该能命中。
坑
- 别用 `a/b` 表示分数。上游数据若用斜杠，
千米/时、元/千克这类单位会被误渲染成分数。用\frac{}{}把「这是分数」这个已知事实显式带过来，不要让渲染层再猜一遍。 - 单个 `_` 是下标，`__` 起才是填空。
a_1渲染成下标；想要填空至少写两个下划线。 - 分数不是 `<sup>`/`<sub>` 拼的。用
inline-flex竖排 +border-t画线，这样嵌在中文正文里行高不会被撑乱、分数线也对得齐。改样式时别退回 sup/sub。 - 组件返回
<span>，可安全嵌进<p>；填空槽带aria-label="填空"，读屏不会读成一串下划线。
相关
- QuestionCard —— 题目卡片，题干/选项内部就是用本组件渲染的
- Markdown —— 整段富文本
- Prose —— 长文排版容器
Playground
38 与 x2,填空
<MathText>{"\\frac{3}{8} 与 x^{2},填空 ____"}</MathText>