rehype-katex

What is rehype-katex?

The rehype-katex package is a plugin for the rehype ecosystem that allows you to transform LaTeX math expressions into HTML using KaTeX. This is particularly useful for rendering mathematical content in web pages.

What are rehype-katex's main functionalities?

Basic LaTeX to HTML Conversion

This feature allows you to convert LaTeX math expressions within your HTML content into properly formatted HTML using KaTeX. The code sample demonstrates how to use rehype-katex to process a string containing a LaTeX expression.

const rehype = require('rehype');
const rehypeKatex = require('rehype-katex');

const html = rehype()
  .use(rehypeKatex)
  .processSync('Here is some math: $E = mc^2$')
  .toString();

console.log(html);

Custom KaTeX Options

This feature allows you to customize the behavior of KaTeX by passing options. In the code sample, the `throwOnError` option is set to `false` to prevent errors from being thrown, and `errorColor` is set to customize the color of error messages.

const rehype = require('rehype');
const rehypeKatex = require('rehype-katex');

const html = rehype()
  .use(rehypeKatex, { throwOnError: false, errorColor: '#cc0000' })
  .processSync('Here is some math: $E = mc^2$')
  .toString();

console.log(html);

Other packages similar to rehype-katex

remark-math

remark-math is a plugin for the remark ecosystem that parses and renders LaTeX math expressions in Markdown. It is similar to rehype-katex but is used within the remark ecosystem for Markdown processing.

markdown-it-katex

markdown-it-katex is a plugin for the markdown-it Markdown parser that allows you to render LaTeX math expressions within Markdown content. It is similar to rehype-katex but is used within the markdown-it ecosystem.

gatsby-remark-katex

gatsby-remark-katex is a plugin for Gatsby that allows you to render LaTeX math expressions in Markdown files. It is similar to rehype-katex but is specifically designed for use with Gatsby.

README

Rehype Katex

KaTeX transformer plugin for rehype.

It transfroms html content of element nodes with math and inlineMath class with KaTeX.

If you are trying to process from Markdown source, using remark-math and remark-rehype is highly recommended.

Usage

npm i -S remark remark-math remark-rehype rehype-stringify
npm i -S rehype-katex

const remark = require('remark')
const math = require('remark-math')
const remark2rehype = require('remark-rehype')
const katex = require('rehype-katex')
const stringify = require('rehype-stringify')

// Raw String => MDAST => HAST => transformed HAST => HTML
const processor = remark()
  .use(math)
  .use(remark2rehype)
  .use(katex)
  .use(stringify)

// https://en.wikipedia.org/wiki/Lift_(force)#Lift_coefficient
const rawString = `Lift($L$) can be determined by Lift Coeeficient ($C_L$) like the following equation.

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

const result = processor.processSync(rawString).toString()
/* result
<p>
  Lift(<span class="inlineMath"><span class="katex">...</span></span>) can be determined by Lift Coeeficient (<span class="inlineMath"><span class="katex">...</span></span>) like the following equation.
</p>
<div class="math">
  <span class="katex-display"><span class="katex">...</span></span>
</div>
*/

Check remark-math for more information.

License

MIT © Junyoung Choi