markdown-it-mathblock

!Coverage

> A markdown-it plugin to render block math that feels like markdown.

Pairs well with [markdown-it-mathspan][markdown-it-mathspan].

This is a markdown-it plugin which renders block math (delimited by
$$ by default) with the same behavior as [fenced code
blocks][commonmark#fenced-code-blocks] ( ` ) according to the
commonmark spec.

``md
$$
x = -b+-sqrt(b^2 - 4ac) / 2a
$$
`

This is useful if you are more familiar with markdown than LaTeX or
sometimes need to include dollar signs in your math expressions.


`md
- Function application:
$$
f$0 = 1
$$
- Calculating dollars:
$$
$a + $b = $c
$$
- Tribble dollars $$$:
$$$$
$$$
$$$$
- Also fine like this:
$$
1 + $$$ + 2
$$
`

Install

`bash
npm install --save markdown-it markdown-it-mathblock
`

Note: This plugin does not include a math renderer. So you must
provide your own: Here are some excellent choices:

- [mathup][mathup] (an AsciiMath Dialect):
`bash
npm install --save mathup
`
- [Temml][temml] (LaTeX):
`bash
npm install --save temml
# And if you plan on using the custom elements (see usage)
npm install --save temml-custom-element
`

Usage

$3

See [mathup][mathup] for the renderer reference.

`js
import markdownIt from "markdown-it";
import markdownItMathblock from "markdown-it-mathblock";

// Optional (for default mathup renderer)
import "mathup/custom-element";

// Optional, with defaults
const options = {
minDelims: 2,
renderer, // See below
customElement, // See below
};

const md = markdownIt().use(markdownItMathblock, options);

md.render(

Document

With block math:

$$
x = -b+-sqrt(b^2 - 4ac) / 2a
$$
);
//

Document

//

With block math:

// x = -b+-sqrt(b^2 - 4ac) / 2a
`

$3

See [Temml][temml] for the renderer reference and
[temml-custom-element][temml-custom-element] for reference on the
custom element.

`js
import markdownIt from "markdown-it";
import markdownItMathblock from "markdown-it-mathblock";
import "temml-custom-element";

const md = markdownIt().use(markdownItMathblock, {
// Do this if you want to use custom macros
customElement: ["la-tex", { display: "block", macros: "persist" }],
});

md.render(

Document

$$ preample
\def\E{\mathbb{E}}
\newcommand\d[0]{\operatorname{d}\!}
$$

With block math:

$$
\E[X] = \int_{-\infty}^{\infty} xf(x) \d{x}
$$
);
//

Document

//
//
// \def\E{\mathbb{E}}
// \newcommand\d[0]{\operatorname{d}\!}
//
//
//

With block math:

//
//
// \E[X] = \int_{-\infty}^{\infty} xf(x) \d{x}
//
`

$3

- minDelims: The minimum required number of delimiters around a
math block. Set this to 3 if you want mathblocks to behave exactly
like code fences.
- renderer: The math renderer. Accepts the source, the parsed
MarkdownIt token, and the markdownIt instance. Defaults to a
function that surrounds and escapes with a custom element (see below).
`js
{
renderer: (src, token, md) =>
${md.utils.escapeHtml(src)},
}
`
- customElement: If you want to specify which custom element to
render into, this is a convenience option to do so. Accepts a pair of
["tag-name", { attribute: "value" }] The default is:
`js
{
customElement: ["math-up", { display: "block" }],
}
`

$3

The default renderer depends on which custom element depends on which
elements are in in your [custom element registry][custom-element-registry].
It will try the following in order:

1. ([see mathup][mathup])
2. ([see Temml][temml] and
[temml-custom-element][temml-custom-element])
3. If none is found it will default to