MathJax¶

MathJax is a beautiful and accessible way to display mathematical content in the browser, adds support for mathematical typesetting in different notations (e.g. LaTeX, MathML, AsciiMath), and can be easily integrated with Material for MkDocs.

Configuration¶

This configuration enables support for rendering block and inline block equations through MathJax. Create a configuration file and add the following lines to mkdocs.yml:

docs/javascripts/mathjax.js mkdocs.yml

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

document$.subscribe(() => { // (1)!
  MathJax.typesetPromise()
})

This integrates MathJax with instant loading.

markdown_extensions:
  - pymdownx.arithmatex:
      generic: true

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

See additional configuration options:

Arithmatex

Usage¶

Using block syntax¶

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

MathJax, block syntax

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

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

Using inline block syntax¶

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

MathJax, inline syntax

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)$.

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)$.