Package Exports

remark-math

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (remark-math) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Remark Math

$npm$ $Build Status$

Math Inline and Block supporting for Remark

What does Remark Math?

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

intro

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: {
    className: 'math-inline'
  },
  blockProperties: {
    className: '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 separated 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: {
    className: '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

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

CAUTION

This library requires 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)
}

remark-math