Math Inline and Block supporting for Remark
Clone or download
Rokt33r Publish
 - rehype-katex@1.2.0
 - remark-html-katex@1.2.0
Latest commit 0c4ab50 Nov 13, 2018
Failed to load latest commit information.
specs Implement macros option to remark-html-katex Nov 13, 2018
.gitignore Bump peerDependencies Nov 12, 2017
.travis.yml Remove test for v4 Feb 21, 2017
LICENSE Initial commit Feb 14, 2017
lerna.json Update devDependencies and use npm client instead of yarn Jun 10, 2017
package-lock.json Upgrade katex to v0.10.x and fix tests Nov 13, 2018
package.json Update Nov 13, 2018

Remark Math

npm Build Status Chat

Math Inline and Block supporting for Remark

What does Remark Math?

remark-math parses $ for inlineMath node and $$ for math node.

Also, you can transform the tex content of inlineMath and math nodes into html by rehype-katex or remark-html-katex.



There are two examples for server-side(examples/nodejs) and browser-side(examples/webpack, via webpack).

You can run the demo by npm run demo:nodejs and npm run demo:webpack.

Basic usages(Using rehype-katex, a little verbose but recommended)

Install dependencies

npm i -S remark remark-math remark-rehype rehype-katex rehype-stringify
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()

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
  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.
<div class="math">
  <span class="katex-display"><span class="katex">...</span></span>

Another usages(Using remark-html-katex)

npm i -S remark remark-math remark-html-katex remark-html
const remark = require('remark')
const math = require('remark-math')
const katex = require('remark-html-katex') // Use remark-html-katex
const html = require('remark-html')

// Raw String => MDAST => transformed MDAST => HTML
const processor = remark()

Using only math inline(or math block)

You can access separated processors by remark-math/inline and remark-math/block

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

const mathInline = require('remark-math/inline')
// const mathBlock = require('remark-math/block')

// Parse only inline
const processor = remark()



remark-math does not handle any option.

rehype-katex and remark-html-katex

const katex = require('rehype-katex')

const processor = remark()
  .use(katex, {
    throwOnError: false,
    errorColor: '#FF0000',
    inlineDoubleDisplay: false


Throw if a KaTeX parse error occurs. (default: false)


As long as options.throwOnError is not true, ParseError message will be colored by options.errorColor. (default: #cc0000)

Options - Katex


A collection of custom macro.

Options - Katex


boolean or string or function (default: "warn"). If false or "ignore", allow features that make writing LaTeX convenient but are not actually supported by (Xe)LaTeX (similar to MathJax). If true or "error" (LaTeX faithfulness mode), throw an error for any such transgressions. If "warn" (the default), warn about such behavior via console.warn. Provide a custom function handler(errorCode, errorMsg, token) to customize behavior depending on the type of transgression (summarized by the string code errorCode and detailed in errorMsg); this function can also return "ignore", "error", or "warn" to use a built-in behavior.

Options - Katex

inlineMathDouble (EXPERIMENTAL: Use with caution)

options.inlineMathDouble of remark-math (EXPERIMENTAL)

Add inlineMathDouble class to inline $$ math. It will have two classes, inlineMath and inlineMathDouble (default: false)

options.inlineMathDoubleDisplay of rehype-katex (EXPERIMENTAL)

If an element has inlineMathDouble class, set displayMode of KaTeX true. (default: false)


This option, together with a CSS rule like .inlineMathDouble {display: block; text-align: center;} allows authors to have equations inside paragraphs on a separate line:

const unified = require('unified')
const parse = require('remark-parse')
const remark2rehype = require('remark-rehype')
const rehypeKatex = require('rehype-katex')
const stringify = require('rehype-stringify')

const processor = unified()
  .use(math, {
    inlineMathDouble: true
  .use(rehypeKatex, {
    inlineMathDoubleDisplay: true



Escaped Dollars

Dollar signs can be escaped by back slash, \.


Escaped dollars

Escaped dollars in math block/inline (Super factorial)



Super factorials

Double dollars in inline

Some TeX packages and Markdown processors use double dollars, $$, as a inline token. Remark Math will parse it also properly.


Double dollars as a inline token


MIT © Junyoung Choi