https://github.com/daiji256/rehype-mathml
rehype plugin to render math with MathML
https://github.com/daiji256/rehype-mathml
hast html latex markdown math rehype rehype-plugin temml tex unified
Last synced: 11 months ago
JSON representation
rehype plugin to render math with MathML
- Host: GitHub
- URL: https://github.com/daiji256/rehype-mathml
- Owner: Daiji256
- License: mit
- Created: 2024-10-25T11:04:40.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-19T13:06:04.000Z (over 1 year ago)
- Last Synced: 2025-03-20T10:12:20.190Z (about 1 year ago)
- Topics: hast, html, latex, markdown, math, rehype, rehype-plugin, temml, tex, unified
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@daiji256/rehype-mathml
- Size: 149 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @daiji256/rehype-mathml
[](https://www.npmjs.com/package/@daiji256/rehype-mathmle)
[](https://www.npmjs.com/package/@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
- [Contents](#contents)
- [What is this?](#what-is-this)
- [When should I use this?](#when-should-i-use-this)
- [Install](#install)
- [Use](#use)
- [API](#api)
- [`unified().use(rehypeMathML[, options])`](#unifieduserehypemathml-options)
- [`Options`](#options)
- [Markdown](#markdown)
- [HTML](#html)
- [Types](#types)
- [License](#license)
## 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`][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`][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].
## Install
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].
## Use
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.
## API
This package exports no identifiers.
The default export is [`rehypeMathML`](#unifieduserehypemathml-options).
### `unified().use(rehypeMathML[, options])`
Render elements with a `language-math` (or `math-display`, `math-inline`)
class with [MathML][].
### `Options`
Configuration (TypeScript type).
```ts
import type { Options as TemmlOptions } from 'temml';
type Options = Partial;
```
See [_Options_ on `temml.org`][temml-options] for more info.
## Markdown
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
```
````
## 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 `
` 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`](#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