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

rehype plugin to transform <span class=math-inline> and <div class=math-display> with KaTeX.

Install

npm:

npm install rehype-katex

Use

Say we have the following file, example.html:

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

<div class="math math-display">
  L = \frac{1}{2} \rho v^2 S C_L
</div>

And our script, example.js, looks as follows:

const vfile = require('to-vfile')
const unified = require('unified')
const parse = require('rehype-parse')
const katex = require('rehype-katex')
const stringify = require('rehype-stringify')

unified()
  .use(parse, {fragment: true})
  .use(katex)
  .use(stringify)
  .process(vfile.readSync('example.html'), function (err, file) {
    if (err) throw err
    console.log(String(file))
  })

Now, running node example yields:

<p>
  Lift(<span class="math math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>L</mi></mrow><annotation encoding="application/x-tex">L</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.68333em;vertical-align:0em;"></span><span class="mord mathnormal">L</span></span></span></span></span>) can be determined by Lift Coefficient
  (<span class="math math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msub><mi>C</mi><mi>L</mi></msub></mrow><annotation encoding="application/x-tex">C_L</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.83333em;vertical-align:-0.15em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right:0.07153em;">C</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.32833099999999993em;"><span style="top:-2.5500000000000003em;margin-left:-0.07153em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mathnormal mtight">L</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.15em;"><span></span></span></span></span></span></span></span></span></span></span>) like the following equation.
</p>

<div class="math math-display"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mi>L</mi><mo>=</mo><mfrac><mn>1</mn><mn>2</mn></mfrac><mi>ρ</mi><msup><mi>v</mi><mn>2</mn></msup><mi>S</mi><msub><mi>C</mi><mi>L</mi></msub></mrow><annotation encoding="application/x-tex">L = \frac{1}{2} \rho v^2 S C_L</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.68333em;vertical-align:0em;"></span><span class="mord mathnormal">L</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span></span><span class="base"><span class="strut" style="height:2.00744em;vertical-align:-0.686em;"></span><span class="mord"><span class="mopen nulldelimiter"></span><span class="mfrac"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.32144em;"><span style="top:-2.314em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">2</span></span></span><span style="top:-3.23em;"><span class="pstrut" style="height:3em;"></span><span class="frac-line" style="border-bottom-width:0.04em;"></span></span><span style="top:-3.677em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">1</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.686em;"><span></span></span></span></span></span><span class="mclose nulldelimiter"></span></span><span class="mord mathnormal">ρ</span><span class="mord"><span class="mord mathnormal" style="margin-right:0.03588em;">v</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8641079999999999em;"><span style="top:-3.113em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span><span class="mord mathnormal" style="margin-right:0.05764em;">S</span><span class="mord"><span class="mord mathnormal" style="margin-right:0.07153em;">C</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.32833099999999993em;"><span style="top:-2.5500000000000003em;margin-left:-0.07153em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mathnormal mtight">L</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.15em;"><span></span></span></span></span></span></span></span></span></span></span></div>

API

rehype().use(katex[, options])

Transform <span class="math-inline"> and <div class="math-display"> with KaTeX.

options

options.throwOnError

Throw if a KaTeX parse error occurs (boolean, default: false). See KaTeX options.

options.<*>

All other options, except for displayMode, are passed to KaTeX.

Security

Use of rehype-katex renders user content with KaTeX, so any vulnerability in KaTeX can open you to a cross-site scripting (XSS) attack.

Always be wary of user input and use rehype-sanitize.

Contribute

See contributing.md in remarkjs/.github for ways to get started. See support.md 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.

License

MIT © Junyoung Choi