mkdocs-material/docs/reference/mathjax.md

template
overrides/main.html

MathJax

MathJax is a beautiful and accessible way to display mathematical content in the browser, allows for writing formulas in different notations, including LaTeX, MathML and AsciiMath, and can be easily integrated with Material for MkDocs.

Configuration

Arithmatex

:octicons-file-code-24: Source · :octicons-workflow-24: Extension

The Arithmatex extension, which is part of of Python Markdown Extensions, allows the rendering of block and inline block equations, and can be enabled via mkdocs.yml:

markdown_extensions:
  - pymdownx.arithmatex:
      generic: true

Besides enabling the extension in mkdocs.yml, a MathJax configuration and the JavaScript runtime need to be included, which can be done with additional JavaScript:

=== "docs/javascripts/config.js"

``` js
window.MathJax = {
  tex: {
    inlineMath: [["\\(", "\\)"]],
    displayMath: [["\\[", "\\]"]],
    processEscapes: true,
    processEnvironments: true
  },
  options: {
    ignoreHtmlClass: ".*|",
    processHtmlClass: "arithmatex"
  }
};

document$.subscribe(() => {
  MathJax.typesetPromise()
})
```

=== "mkdocs.yml"

``` yaml
extra_javascript:
  - javascripts/config.js
  - https://polyfill.io/v3/polyfill.min.js?features=es6
  - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
```

MathJax can be configured in many different ways, for which Material for MkDocs might not provide native support. See the official documentation for more information.

!!! tip "Using MathJax with instant loading"

There's no additional effort necessary to integrate _MathJax 3_ with
[instant loading][9] – it's expected to work straight away. However, a
previous version of this document explained how to integrate Material for
MkDocs with _MathJax 2_, which doesn't exhibit this behavior. It's therefore
highly recommended to switch to _MathJax 3_.

Usage

Using block syntax

Blocks must be enclosed in #!latex $$...$$ or #!latex \[...\]on separate lines:

Example:

$$
\operatorname{ker} f=\{g\in G:f(g)=e_{H}\}{\mbox{.}}
$$

Result:

\operatorname{ker} f=\{g\in G:f(g)=e_{H}\}{\mbox{.}}

Using inline block syntax

Inline blocks must be enclosed in #!latex $...$ or #!latex \(...\):

Example:

The homomorphism $f$ is injective if and only if its kernel is only the 
singleton set $e_G$, because otherwise $\exists a,b\in G$ with $a\neq b$ such 
that $f(a)=f(b)$.

Result:

The homomorphism f is injective if and only if its kernel is only the singleton set e_G, because otherwise \exists a,b\in G with a\neq b such that f(a)=f(b).