Marp

Math typesetting

Many Markdown tools support math rendering. We have Pandoc's Markdown style math typesetting support. Marp renders math using MathJax (or, alternatively, KaTeX).

Inline math

Surround your formula with a single dollar character $...$.

  1. Render inline math such as $ax^2+bc+c$.

Math block

Surround the formula with double dollar characters $$...$$. Math in the block element will render with centering. The math in the block element will also scale down automatically if it is sticking out from the horizontal border of the slide (only in supported themes).

  1. $$ I_{xx}=\int\int_Ry^2f(x,y)\cdot{}dydx $$

  3. $$
  4. f(x) =
  5.   \int_{-\infty}^\infty
  6.   \hat f(\xi)\,e^{2 \pi i \xi x}
  7.   \,d\xi
  8. $$

This feature is inherited from Marp Core.

MathJax

By default, Marp uses MathJax to render math typesetting.

Declare to use MathJax

Set math global directive as mathjax.

  1. ---
  2. math: mathjax
  3. ---

  5. Render inline math such as $ax^2+bc+c$.

For the determined rendering of slide, we recommend always to declare math library to use in the slide. No definition of math directive may bring inconsistent rendering result depending on the version of Marp Core.

KaTeX

KaTeX is an alternative library to render math typesettings in Marp, and it was former default.

By defining math global directive as katex, you can can continue to render math with KaTeX.

Enable KaTeX

Set math global directive as katex.

  1. ---
  2. math: katex
  3. ---

  5. Render inline math such as $ax^2+bc+c$.

Define global macro

In KaTeX rendering, macros defined by \def will persist only in a local math environment. To persist defined macro for subsequent math environments in Markdown, use \gdef (\global\def) instead.

  1. $$
  2. % macroA can use only in this math block.
  3. \def\macroA{{\color{red}A}}

  5. % macroB has defined globally so you can use it after here.
  6. \gdef\macroB{{\color{blue}B}}

  8. \macroA + \macroB
  9. $$

  11. ---

  13. $$
  14. % macroA cannot use, but macroB can.
  15. \macroA + \macroB
  16. $$

See the detail of supported macro functions in KaTeX documentation.

Configuration

KaTeX options can be configured in Marp Core's constructor option. You should use Marp CLI if you need to set a custom configuration in Marp conversion.

  1. // marp.config.js
  2. module.exports = {
  3.   options: {
  4.     math: {
  5.       lib: 'katex',
  6.       katexFontPath: 'https://example.com/assets/katex-fonts/'
  7.       katexOption: {
  8.         errorColor: '#ff0000',
  9.         macros: {
  10.           '\\RR': '\\mathbb{R}',
  11.         },
  12.       },
  13.     },
  14.   },
  15. }
  1. marp -c marp.config.js marp-math.md

See the details of KaTeX option in the documentation.

mhchem extension

mhchem is an extension for writing chemical equations. To enable mhchem in Marp, you should use a Marp CLI configuration file and follow a guide of KaTeX for Node.js.

  1. // marp.config.js
  2. const katex = require('katex')
  3. require('katex/dist/contrib/mhchem.js') // modify katex module
  1. marp -c marp.config.js marp-mhchem.md

A common mistake is using a client-side <script> to load the extension. This will not work because Marp's rendering will be completed within Node.js, not the browser. See also: marp-team/marp#99

Known issues for KaTeX rendering

  • KaTeX rendering requires fetching Web Fonts from jsDelivr CDN. If you are in offline or the limited network by proxy, the slide may not render math.
  • Safari does not shrink down the big math block rendered by KaTeX. (marp-team/marp-core#159)
  • Rendering of \tag{} is incompatible with the math block. (marp-team/marp-core#236)