rehype plugin to render math with MathML
npm install @daiji256/rehype-mathml

[rehype][] plugin to render math with MathML by
converting LaTeX math to MathML using temml.
The reason for using [temml][] is that it is a lightweight library
with a wide coverage of LaTeX functions.
- Contents
- What is this?
- When should I use this?
- Install
- Use
- API
- [unified().use(rehypeMathML[, options])](#unifieduserehypemathml-options)
- Options
- Markdown
- HTML
- Types
- License
This package is a [unified][] ([rehype][]) plugin to render math with MathML.
You can add classes to HTML elements, use fenced code in markdown, or combine
with [remark-math][remark-math] for a $C$ syntax extension.
This project is useful as it renders math with MathML at compile time,
which means that no client-side JavaScript or images are needed.
This plugin is the MathML version of other plugins like
[rehype-mathjax][rehype-mathjax] (renders with MathJax) and
[rehype-katex][rehype-katex] (renders with KaTeX).
With MathML, the HTML becomes simpler and lighter.
Additionally, it supports the use of math fonts like [Noto Math][note-math].
In Node.js (version 16+), install with [npm][]:
``sh`
npm install @daiji256/rehype-mathml
To ensure proper rendering of mathematical expressions in every browser, you need to add [Temml.woff2 and Temml-*.css][temml-dist].
Say our document input.html contains:
`html`
Lift(L) can be determined by Lift
Coefficient (C_L) like the following
equation.
L = \frac{1}{2} \rho v^2 S C_L
…and our module example.js contains:
`js
import { unified } from 'unified';
import rehypeParse from 'rehype-parse';
import rehypeStringify from 'rehype-stringify';
import rehypeMathML from '@daiji256/rehype-mathml';
import { read, write } from 'to-vfile';
const file = await unified()
.use(rehypeParse, { fragment: true })
.use(rehypeMathML)
.use(rehypeStringify)
.process(await read('input.html'));
file.basename = 'output.html';
await write(file);
`
…then running node example.js creates an output.html with:
`html`
Lift() can be determined by Lift
Coefficient () like the following
equation.
…open output.html in a browser to see the rendered math.
This package exports no identifiers.
The default export is rehypeMathML.
Render elements with a language-math (or math-display, math-inline)
class with [MathML][].
Configuration (TypeScript type).
`ts
import type { Options as TemmlOptions } from 'temml';
type Options = Partial
`
See [_Options_ on temml.org][temml-options] for more info.
This plugin supports the syntax extension enabled by
[remark-math][remark-math].
It also supports math generated by using fenced code:
``markdown`math`
C_L``
The content of any element with a language-math, math-inline, ormath-display class is transformed.math-display
The elements are replaced by MathML transformed by temml.
Either a class or using
will
result in “display” math: math that is a block on its own line.Types
This package is fully typed with [TypeScript][].
It exports the additional type
Options`.License
[MIT][license] © [Daiji256][author]
[mathml]: https://www.w3.org/Math/
[temml]: https://temml.org/
[temml-options]: https://temml.org/docs/en/administration#options
[temml-dist]: https://github.com/ronkok/Temml/tree/main/dist
[unified]: https://github.com/unifiedjs/unified
[rehype]: https://github.com/rehypejs/rehype
[remark-math]: https://github.com/remarkjs/remark-math/tree/main/packages/remark-math
[rehype-mathjax]: https://github.com/remarkjs/remark-math/tree/main/packages/rehype-mathjax
[rehype-katex]: https://github.com/remarkjs/remark-math/tree/main/packages/rehype-katex
[npm]: https://docs.npmjs.com/cli/install
[typescript]: https://www.typescriptlang.org
[note-math]: https://github.com/notofonts/math
[license]: LICENSE
[author]: https://github.com/Daiji256