remark-math

What is remark-math?

The remark-math package is a plugin for the remark markdown processor that allows you to parse and render mathematical expressions written in LaTeX. It supports both inline and block math expressions, making it useful for documents that require mathematical notation.

What are remark-math's main functionalities?

Inline Math

This feature allows you to include inline mathematical expressions within your markdown text. The example demonstrates how to use the remark-math plugin to parse and render an inline math expression.

const remark = require('remark');
const remarkMath = require('remark-math');
const html = require('remark-html');

remark()
  .use(remarkMath)
  .use(html)
  .process('Here is some inline math: $E=mc^2$', function (err, file) {
    if (err) throw err;
    console.log(String(file));
  });

Block Math

This feature allows you to include block mathematical expressions in your markdown text. The example demonstrates how to use the remark-math plugin to parse and render a block math expression.

const remark = require('remark');
const remarkMath = require('remark-math');
const html = require('remark-html');

remark()
  .use(remarkMath)
  .use(html)
  .process('$$\int_0^\infty e^{-x} \, dx = 1$$', function (err, file) {
    if (err) throw err;
    console.log(String(file));
  });

Other packages similar to remark-math

markdown-it-math

markdown-it-math is a plugin for the markdown-it parser that allows you to include LaTeX math expressions in your markdown documents. It supports both inline and block math, similar to remark-math, but is designed to work with the markdown-it ecosystem.

katex

KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web. While it is not a markdown plugin itself, it can be used in conjunction with markdown parsers to render math expressions. It is known for its speed and reliability.

mathjax

MathJax is a JavaScript display engine for mathematics that works in all browsers. It supports a wide range of LaTeX and MathML expressions. Like KaTeX, it is not a markdown plugin but can be integrated with markdown parsers to render math expressions.

README

Remark Math

Add math inline and block syntax to Remark

What does Remark Math?

Remark Math parses $ for math inline and $$ for math block.

Raw string

Lift($L$) can be determined by Lift Coeeficient ($C_L$) like the following equation.

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

Parsed Abstract Syntax Tree(Omitted)

{
  type: root
  children: [
    {
      type: paragraph,
      children: [{
        type: 'text',
        value: ''
      }]
    },
    {
      type: 'math',
      children: [{
        type: 'text',
        value: 'L = \frac{1}{2} \rho v^2 S C_L'
      }]
    }
  ]
}

Result HTML string (If you choose KaTeX)

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

Usages

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

const remark = require('remark')
const html = require('remark-html')
const math = require('remark-math')
const katex = require('katex')

const opts = {
  katex,
  inlineProperties: {
    class: 'math-inline'
  },
  blockProperties: {
    class: 'math-block'
  }
}

const processor = remark().use(math, opts).use(html)

// 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
$$
`

// Raw string => AST
const parsedAST = processor.parse(rawString)
// AST => HTML string
const renderedString = processor.stringify(parsedAST)

// Or you can directly process the markdown string
// const renderedString = processor.process(rawString).toString()

console.log(renderedString)

Using only math inline(or math block)

Access separate processors via remark-math/inline and remark-math/block

const remark = require('remark')
const html = require('remark-html')
const katex = require('katex')

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

const opts = {
  katex,
  inlineProperties: {
    class: 'math-inline'
  }
}

const processor = remark().use(mathInline, opts).use(html)

API

remark.use(math[, options])

options.katex (Optional)

KaTeX renderer

options.blockProperties (Optional)

Properties for math block

options.inlineProperties (Optional)

Properties for math inline

Specs

Escaped Dollars

Dollar signs can be escaped by back slash, \.

\$\alpha\$

Escaped dollars in math block/inline (Super factorial)

$\alpha\$$

$$
\beta\$
$$

Double dollars in inline

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

$$\alpha$$

CAUTION

This library is REQUIRED remark-parse@>=2.3.0 as a peer dependency.

For your information wooorm/remark#232

You can check which version you are using by the following command.

npm ls remark

If you don't know how to fix, I recommend you to use remark-parse directly.

First, remove remark and install remark-parse and unified

npm rm -S remark
npm i -S remark-parse unified

# Optional
npm i -S remark-stringify

Then, rewrite remark like the following.

// Before
const remark = require('remark')

// After
const unified = require('unified')
const parse = require('remark-parse')
// const stringify = require('remark-stringify')

function remark () {
  return unified()
    .use(parse)
    // .use(stringify)
}

License

MIT © Junyoung Choi