Markdown-it Katex

Markdown It plugin that adds KaTeX rendering. This is used by VS Code to render math in Markdown.

Originally forked from @iktakahiro/markdown-it-katex

Usage

Install markdown-it

1npm install markdown-it

Install the plugin

1npm install @vscode/markdown-it-katex

Use it in your javascript

1const md = require("markdown-it")();
2const mk = require("@vscode/markdown-it-katex").default;
3
4md.use(mk);
5
6// double backslash is required for javascript strings, but not html input
7const result = md.render("# Math Rulez! \n  $\\sqrt{3x-1}+(1+x)^2$");

Include the KaTeX stylesheet in your html:

1<link
2  rel="stylesheet"
3  href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css"
4/>

If you're using the default markdown-it parser, I also recommend the github stylesheet:

1<link
2  rel="stylesheet"
3  href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css"
4/>

KaTeX options can be supplied with the second argument to use.

1md.use(mk, { throwOnError: false, errorColor: " #cc0000" });

Examples

Inline

Surround your LaTeX with a single $ on each side for inline rendering.

1$\sqrt{3x-1}+(1+x)^2$

Block

Use two ($$) for block rendering. This mode uses bigger symbols and centers the result.

1$$\begin{array}{c}
2
3\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &
4= \frac{4\pi}{c}\vec{\mathbf{j}}    \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
5
6\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
7
8\nabla \cdot \vec{\mathbf{B}} & = 0
9
10\end{array}$$

Using your own version of KaTeX

1import MarkdownIt from "markdown-it";
2import mk from "@vscode/markdown-it-katex";
3import katex from "katex";
4
5// Load some katex extensions
6import "katex/contrib/mhchem";
7import "katex/contrib/copy-tex";
8
9const md = new MarkdownIt();
10md.use(mk.default, { katex });
11
12const result = md.render("# Math Rulez! \n  $\\sqrt{3x-1}+(1+x)^2$");
13const chemResult = md.render("$\\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$");
14console.log(result);
15console.log(chemResult);

Syntax

Math parsing in markdown is designed to agree with the conventions set by pandoc:

Anything between two $ characters will be treated as TeX math. The opening $ must
have a non-space character immediately to its right, while the closing $ must
have a non-space character immediately to its left, and must not be followed
immediately by a digit. Thus, $20,000 and $30,000 won’t parse as math. If for some
reason you need to enclose text in literal $ characters, backslash-escape them and
they won’t be treated as math delimiters.

Math Syntax Support

KaTeX is based on TeX and LaTeX. Support for both is growing. Here's a list of currently supported functions:

Things that KaTeX does not (yet) support