Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Build Coverage Downloads Size Sponsors Backers Chat

This project is a monorepo that contains several packages for dealing with math in markdown and HTML.


What is this?

This repository contains unified (remark and rehype) plugins to add support for math. You can use them to add support for parsing and serializing this syntax extension and to render math with KaTeX or MathJax.

You typically use remark-math combined with either rehype-katex or rehype-mathjax.

unified is a project that transforms content with abstract syntax trees (ASTs). remark adds support for markdown and rehype adds support for HTML to unified.

When should I use this?

This project is useful when you want to support LaTeX math. This mechanism works well when you want authors, that have some LaTeX experience, to be able to embed rich diagrams of math to scientific documentation. The syntax of math in markdown does not work everywhere so it makes markdown less portable. This project is also useful as it renders math with KaTeX or MathJax at compile time, which means that there is no client side JavaScript needed.


Example: KaTeX

Say we have the following file

Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following

L = \frac{1}{2} \rho v^2 S C_L

And our module example.js looks as follows:

import {read} from 'to-vfile'
import {unified} from 'unified'
import remarkParse from 'remark-parse'
import remarkMath from 'remark-math'
import remarkRehype from 'remark-rehype'
import rehypeKatex from 'rehype-katex'
import rehypeStringify from 'rehype-stringify'

const file = await unified()
  .process(await read(''))


Now running node example.js yields:

<p>Lift(<span class="math math-inline"><span class="katex"></span></span>) can be determined by Lift Coefficient (<span class="math math-inline"><span class="katex"></span></span>) like the following equation.</p>
<div class="math math-display"><span class="katex-display"></span></div>

👉 Note: KaTeX requires CSS to render correctly. Use katex.css somewhere on the page where the math is shown to style it properly:

<link rel="stylesheet" href="" integrity="sha384-Xi8rHCmBmhbuyyhbI88391ZKP2dmfnOl4rT9ZfRI7mLTdk1wblIUnrIq35nqwEvC" crossorigin="anonymous">

Example: MathJax

Supporting either MathJax or KaTeX is very similar. Take the above KaTeX example and change:

@@ -3,7 +3,7 @@ import {unified} from 'unified'
 import remarkParse from 'remark-parse'
 import remarkMath from 'remark-math'
 import remarkRehype from 'remark-rehype'
-import rehypeKatex from 'rehype-katex'
+import rehypeMathjax from 'rehype-mathjax'
 import rehypeStringify from 'rehype-stringify'

@@ -13,7 +13,7 @@
-  .use(rehypeKatex)
+  .use(rehypeMathjax)
   .process(await read(''))

Now running node example.js yields:

<p>Lift(<span class="math math-inline"><mjx-container class="MathJax" jax="SVG"></svg></mjx-container></span>) can be determined by Lift Coefficient (<span class="math math-inline"><mjx-container class="MathJax" jax="SVG"></svg></mjx-container></span>) like the following
<div class="math math-display"><mjx-container class="MathJax" jax="SVG" display="true"></svg></mjx-container></div>
<style>mjx-container[jax="SVG"]{direction: ltr}/*…*/</style>


Using rehype-katex or rehype-mathjax should be safe assuming that you trust KaTeX and MathJax. Any vulnerability in them could open you to a cross-site scripting (XSS) attack. See their readmes for more info.


See in remarkjs/.github for ways to get started. See for ways to get help.

This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.


MIT © Junyoung Choi and TANIGUCHI Masaya