@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?
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 for a $C$ syntax extension.
When should I use this?
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 (renders with MathJax) and
rehype-katex (renders with KaTeX).
With MathML, the HTML becomes simpler and lighter.
Additionally, it supports the use of math fonts like Noto Math.
Install
In Node.js (version 16+), install with npm:
npm install @daiji256/rehype-mathml
To ensure proper rendering of mathematical expressions in every browser, you need to add Temml.woff2 and Temml-*.css.
Use
Say our document input.html contains:
<p>
Lift(<code class="language-math">L</code>) can be determined by Lift
Coefficient (<code class="language-math">C_L</code>) like the following
equation.
</p>
<pre><code class="language-math">
L = \frac{1}{2} \rho v^2 S C_L
</code></pre>
…and our module example.js contains:
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:
<p>
Lift(<math><!--…--></math>) can be determined by Lift
Coefficient (<math><!--…--></math>) like the following
equation.
</p>
<math display="block" class="tml-display" style="display:block math;"><!--…--></math>
…open output.html in a browser to see the rendered math.
API
This package exports no identifiers.
The default export is rehypeMathML.
unified().use(rehypeMathML[, options])
Render elements with a language-math (or math-display, math-inline)
class with MathML.
Options
Configuration (TypeScript type).
import type { Options as TemmlOptions } from 'temml';
type Options = Partial<TemmlOptions>;
See Options on temml.org for more info.
Markdown
This plugin supports the syntax extension enabled by
remark-math.
It also supports math generated by using fenced code:
```math
C_L
```
HTML
The content of any element with a language-math, math-inline, or
math-display class is transformed.
The elements are replaced by MathML transformed by temml.
Either a math-display class or using <pre><code class="language-math"> 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.