MathText

math-text

Parses a LaTeX subset into searchable inline fractions, roots, scripts, and answer blanks.

Usage

Basic usage

The fractions are stacked up and down, the superscripts are sunk into subscripts, and the blanks are filled in and rendered into writeable spaces.

Convert 38 into a decimal to .

tsx

<MathText>{"Convert \\frac{3}{8} into a decimal as ____"}</MathText>

Mixed symbols in the question

Real junior high school mathematics questions: fractions / exponents / subscripts / fill-in-the-blanks are mixed in the Chinese text.

It is known that the parabola y=ax² passes through the point P(2,3), then a=34, at this time a₁=.

tsx

<MathText>{"It is known that the parabola y=ax^{2}, and the point P(2,3) is on it, then a_1=____"}</MathText>

Side-by-side option

Multiple choice questions with four score options, the row height will not be messed up.

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>

Root number

The radicand number is marked with a horizontal line to avoid the ambiguity of √a+b; support for root exponents.

a²+b² and 38

tsx

<MathText>{"\\sqrt{a^{2}+b^{2}} and \\sqrt[3]{8}"}</MathText>

Vectors

Arrow width for \vec and \overrightarrow follows the content, so it covers single letters and multi-letter names alike.

Given AB is collinear with a, then a·AB=0

tsx

<MathText>{"Given \\overrightarrow{AB} is collinear with \\vec{a}"}</MathText>

Sets and logic

Senior-high staples: blackboard-bold number sets, set-builder notation, and biconditionals.

Let A={x∣x>0,x∈ℝ}, then x∈A⇔x>0

tsx

<MathText>{"A=\\{x\\mid x\\in\\mathbb{R}\\}"}</MathText>

When to use

Use MathText to embed mathematical notation in question stems, answer options, explanations, or prose. Question-bank content extracted from PDF or Word commonly contains fractions such as \frac{3}{8}, exponents such as x^{2}, and answer blanks such as ____; rendering it as plain text would expose that source notation.

Do not use MathText for complete rich-text passages—use Markdown—or for source code—use Code. Use KaTeX when full LaTeX support is required, including matrices, integrals, summations, or alignment environments. MathText deliberately covers only common educational notation to remain dependency-free.

Import

import { MathText, parseMath, mathToPlain } from "@hulianui/ui"

Supported notation

Notation	Meaning	Example
`\frac{a}{b}`	Fraction with vertically stacked numerator and denominator.	`\frac{16}{9}`
`\sqrt{a}` / `\sqrt[n]{a}`	Square or nth root with an overline above the radicand.	`\sqrt{a^{2}+b^{2}}`
`^{...}` or `^a`	Superscript.	`x^{2}`, `x^2`
`_{...}` or `_a`	Subscript.	`a_{1}`, `a_1`
`____`	Answer blank formed by 2 or more consecutive underscores.	`Answer: ____`
`\overline{}` / `\widehat{}`	Overline/hat	`\overline{AB}`
`\vec{}` / `\overrightarrow{}`	Vector arrow whose width follows the content.	`\overrightarrow{AB}`
`\underline{}`	Underline applied to existing content, unlike an answer blank.	`\underline{A}`
`\overset{}{}`	Places a mark above the content.	`\overset{\frown}{AB}`
`\mathbb{}`	Blackboard-bold number sets.	`\mathbb{R}` → ℝ
`\text{}` / `\mathrm{}` / `\mathbf{}`	Font wrappers; the wrapper is removed and content retained.	`\text{Group A}`
`\left` / `\right`	Delimiter-sizing commands; commands are removed and delimiters retained.	`\left(a\right)`
`\{` `\}` `\%` `\$` `\&` `\#` `\_`	Escaped characters restored to their literal form.	`\{x\mid x>0\}`
Symbol commands	Converted to Unicode; see below.	`\angle` → ∠

Symbol table

\angle ∠ \triangle △ \parallel ∥ \perp ⊥ \cong ≌ \sim ∽ \odot ⊙ \circ °
\times × \div ÷ \cdot · \pm ± \neq ≠ \leq(slant) ≤ \geq(slant) ≥ \approx ≈
\Rightarrow ⇒ \Leftrightarrow ⇔ \to → \mid ∣ \forall ∀ \langle ⟨ \rangle ⟩ \frown ⌢
See math-text.symbols.ts for Greek letters, set operators, \therefore ∴, \because ∵, \ldots …, and other symbols.

The supported set was selected from command frequencies in real question text rather than chosen arbitrarily, and it covers the long tail:

First pass: 22,000 characters of middle-school mathematics recognized with PaddleOCR-VL. Most frequent commands: \angle 140 · \frac 99 · \circ 80 · \triangle 60 · \sqrt 55 · \times 51.
Second pass widened the sample to 1,324 questions spanning all grade levels, including their explanations. Vector, set, and logic notation dominate senior-high content and barely appear in middle-school samples: \overrightarrow 169 · \vec 113 · \Rightarrow 52 · \mathbb 16 · \Leftrightarrow 10.

Unsupported content is emitted literally. Unknown or incomplete notation is never silently discarded: \oiint remains \oiint, and an incomplete \frac{3} is preserved as written.

Props

Name	Type	Default	Description
`children`	`string`	—	Text containing mathematical notation
`blankWidth`	`number`	`2.5`	Minimum width of fill-in-the-blank slot (em)
`scriptScale`	`number`	`0.75`	Relative font size for superscript and subscript
`className`	`string`	—	—

Pure helpers

parseMath(src) → MathNode[] returns parsed nodes for custom rendering or structural validation.
mathToPlain(src) → string converts notation to plain text (\frac{3}{8} → 3/8).

Always use `mathToPlain` for search indexing, exports, and plain-text comparisons. Do not index the marked-up source directly; a user searching for "3/8" should find \frac{3}{8}.

Usage guidelines

Do not infer fractions from `a/b`. Slashes also appear in units such as km/h and USD/kg. Use \frac{}{} upstream to state explicitly that the content is a fraction.
Do not strip `\mathbb{R}` down to `R` upstream. The set of real numbers and a variable named R are different things, and collapsing them makes "the domain is ℝ" read as "the domain is R" with no visible sign that information was lost. Pass the command through and let MathText map it to blackboard bold.
Write an arc as `\overset{\frown}{AB}`, not `\frown{AB}`. The latter means "arc symbol followed by a group" in LaTeX, so MathText renders it literally as ⌢{AB}. Looking wrong is the intent: guessing an unstated meaning is worse.
`\vec` and `\overrightarrow` render at the same width here, both following the content. TeX gives the former a fixed narrow arrow; that difference is flattened deliberately, because both mark a vector in question text and the width carries no information, while following the content lets \vec{AB} cover its letters.
One `_` starts a subscript; two or more create an answer blank. a_1 is a subscript, so use at least __ for a blank.
Fractions are not built with `` and ``. Their vertical inline-flex layout and border-t keep surrounding line height and fraction bars aligned; preserve this approach when changing styles.
Whitespace after a command name terminates the command. In \angle ABC, that space is consumed so notation such as \angle and \triangle does not introduce an extra visual gap.
Do not wrap `30^{\circ}` in another ``. \circ already behaves as a superscript character and would be raised twice.
Matrices and equation systems degrade lossily. \begin{array}…\end{array} is flattened to one line and \\ becomes a semicolon. Use KaTeX for faithful layout.
The component returns a  and is safe inside . Answer blanks use aria-label="Answer blank", so screen readers do not announce a sequence of underscores.

QuestionCard — question cards whose stems and options use MathText
Markdown — complete rich-text passages
Prose — long-form typography container

Playground

ContentsFill in the blank width (em)Superscript and subscript ratio

38 and x², fill in the blank

<MathText>{"\\frac{3}{8} and x^{2}, fill in the blank ____"}</MathText>

Usage

Basic usage

The fractions are stacked up and down, the superscripts are sunk into subscripts, and the blanks are filled in and rendered into writeable spaces.

Convert 38 into a decimal to .

tsx

<MathText>{"Convert \\frac{3}{8} into a decimal as ____"}</MathText>

Mixed symbols in the question

Real junior high school mathematics questions: fractions / exponents / subscripts / fill-in-the-blanks are mixed in the Chinese text.

It is known that the parabola y=ax² passes through the point P(2,3), then a=34, at this time a₁=.

tsx

<MathText>{"It is known that the parabola y=ax^{2}, and the point P(2,3) is on it, then a_1=____"}</MathText>

Side-by-side option

Multiple choice questions with four score options, the row height will not be messed up.

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>

Root number

The radicand number is marked with a horizontal line to avoid the ambiguity of √a+b; support for root exponents.

a²+b² and 38

tsx

<MathText>{"\\sqrt{a^{2}+b^{2}} and \\sqrt[3]{8}"}</MathText>

Vectors

Arrow width for \vec and \overrightarrow follows the content, so it covers single letters and multi-letter names alike.

Given AB is collinear with a, then a·AB=0

tsx

<MathText>{"Given \\overrightarrow{AB} is collinear with \\vec{a}"}</MathText>

Sets and logic

Senior-high staples: blackboard-bold number sets, set-builder notation, and biconditionals.

Let A={x∣x>0,x∈ℝ}, then x∈A⇔x>0

tsx

<MathText>{"A=\\{x\\mid x\\in\\mathbb{R}\\}"}</MathText>

When to use

Supported notation

Notation	Meaning	Example
`\frac{a}{b}`	Fraction with vertically stacked numerator and denominator.	`\frac{16}{9}`
`\sqrt{a}` / `\sqrt[n]{a}`	Square or nth root with an overline above the radicand.	`\sqrt{a^{2}+b^{2}}`
`^{...}` or `^a`	Superscript.	`x^{2}`, `x^2`
`_{...}` or `_a`	Subscript.	`a_{1}`, `a_1`
`____`	Answer blank formed by 2 or more consecutive underscores.	`Answer: ____`
`\overline{}` / `\widehat{}`	Overline/hat	`\overline{AB}`
`\vec{}` / `\overrightarrow{}`	Vector arrow whose width follows the content.	`\overrightarrow{AB}`
`\underline{}`	Underline applied to existing content, unlike an answer blank.	`\underline{A}`
`\overset{}{}`	Places a mark above the content.	`\overset{\frown}{AB}`
`\mathbb{}`	Blackboard-bold number sets.	`\mathbb{R}` → ℝ
`\text{}` / `\mathrm{}` / `\mathbf{}`	Font wrappers; the wrapper is removed and content retained.	`\text{Group A}`
`\left` / `\right`	Delimiter-sizing commands; commands are removed and delimiters retained.	`\left(a\right)`
`\{` `\}` `\%` `\$` `\&` `\#` `\_`	Escaped characters restored to their literal form.	`\{x\mid x>0\}`
Symbol commands	Converted to Unicode; see below.	`\angle` → ∠

Symbol table

The supported set was selected from command frequencies in real question text rather than chosen arbitrarily, and it covers the long tail:

First pass: 22,000 characters of middle-school mathematics recognized with PaddleOCR-VL. Most frequent commands: \angle 140 · \frac 99 · \circ 80 · \triangle 60 · \sqrt 55 · \times 51.

Second pass widened the sample to 1,324 questions spanning all grade levels, including their explanations. Vector, set, and logic notation dominate senior-high content and barely appear in middle-school samples: \overrightarrow 169 · \vec 113 · \Rightarrow 52 · \mathbb 16 · \Leftrightarrow 10.

Unsupported content is emitted literally. Unknown or incomplete notation is never silently discarded: \oiint remains \oiint, and an incomplete \frac{3} is preserved as written.

Name

Type

Default

Description

children

string

—

Text containing mathematical notation

blankWidth

number

2.5

Minimum width of fill-in-the-blank slot (em)

scriptScale

number

0.75

Relative font size for superscript and subscript

className

string

—

Pure helpers

parseMath(src) → MathNode[] returns parsed nodes for custom rendering or structural validation.

mathToPlain(src) → string converts notation to plain text (\frac{3}{8} → 3/8).

Always use `mathToPlain` for search indexing, exports, and plain-text comparisons. Do not index the marked-up source directly; a user searching for "3/8" should find \frac{3}{8}.

Usage guidelines

Do not infer fractions from `a/b`. Slashes also appear in units such as km/h and USD/kg. Use \frac{}{} upstream to state explicitly that the content is a fraction.

Do not strip `\mathbb{R}` down to `R` upstream. The set of real numbers and a variable named R are different things, and collapsing them makes "the domain is ℝ" read as "the domain is R" with no visible sign that information was lost. Pass the command through and let MathText map it to blackboard bold.

Write an arc as `\overset{\frown}{AB}`, not `\frown{AB}`. The latter means "arc symbol followed by a group" in LaTeX, so MathText renders it literally as ⌢{AB}. Looking wrong is the intent: guessing an unstated meaning is worse.

`\vec` and `\overrightarrow` render at the same width here, both following the content. TeX gives the former a fixed narrow arrow; that difference is flattened deliberately, because both mark a vector in question text and the width carries no information, while following the content lets \vec{AB} cover its letters.

One `_` starts a subscript; two or more create an answer blank. a_1 is a subscript, so use at least __ for a blank.

Fractions are not built with `` and ``. Their vertical inline-flex layout and border-t keep surrounding line height and fraction bars aligned; preserve this approach when changing styles.

Whitespace after a command name terminates the command. In \angle ABC, that space is consumed so notation such as \angle and \triangle does not introduce an extra visual gap.

Do not wrap `30^{\circ}` in another ``. \circ already behaves as a superscript character and would be raised twice.

Matrices and equation systems degrade lossily. \begin{array}…\end{array} is flattened to one line and \\ becomes a semicolon. Use KaTeX for faithful layout.

The component returns a  and is safe inside . Answer blanks use aria-label="Answer blank", so screen readers do not announce a sequence of underscores.

MathText

Usage

Basic usage

Mixed symbols in the question

Side-by-side option

Root number

Vectors

Sets and logic

When to use

Import

Supported notation

Symbol table

Props

Pure helpers

Usage guidelines

Related

Playground

MathText

Usage

Basic usage

Mixed symbols in the question

Side-by-side option

Root number

Vectors

Sets and logic

When to use

Import

Supported notation

Symbol table

Props

Pure helpers

Usage guidelines

Related

Playground