@daiji256/rehype-mathml NPM

@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.

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.