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
Permalink
Failed to load latest commit information.
examples
packages
resources
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
readme.md Update readme.md Nov 13, 2018

readme.md

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.

intro

Usages

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()
  .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>
*/

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()
  .use(math)
  .use(katex)
  .use(html)

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()
  .use(mathInline)
  .use(remark2rehype)
  .use(katex)
  .use(stringify)

API

remark-math

remark-math does not handle any option.

rehype-katex and remark-html-katex

const katex = require('rehype-katex')

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

options.throwOnError

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

options.errorColor

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

Options - Katex

options.macros

A collection of custom macro.

Options - Katex

options.strict

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)

Usage

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(parse)
  .use(math, {
    inlineMathDouble: true
  })
  .use(remark2rehype)
  .use(rehypeKatex, {
    inlineMathDoubleDisplay: true
  })
  .use(stringify)

Example

Specs

Escaped Dollars

Dollar signs can be escaped by back slash, \.

\$\alpha\$

Escaped dollars

Escaped dollars in math block/inline (Super factorial)

$\alpha\$$

$$
\beta\$
$$

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.

$$\alpha$$

Double dollars as a inline token

License

MIT © Junyoung Choi