mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-09-24 19:38:27 +02:00
122 lines
3.0 KiB
Markdown
122 lines
3.0 KiB
Markdown
---
|
|
template: overrides/main.html
|
|
icon: material/math-integral
|
|
---
|
|
|
|
# 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.
|
|
|
|
[MathJax]: https://www.mathjax.org/
|
|
[LaTeX]: https://en.wikibooks.org/wiki/LaTeX/Mathematics
|
|
[MathML]: https://en.wikipedia.org/wiki/MathML
|
|
[AsciiMath]: http://asciimath.org/
|
|
|
|
## 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`:
|
|
|
|
=== ":octicons-file-code-16: docs/javascripts/mathjax.js"
|
|
|
|
``` js
|
|
window.MathJax = {
|
|
tex: {
|
|
inlineMath: [["\\(", "\\)"]],
|
|
displayMath: [["\\[", "\\]"]],
|
|
processEscapes: true,
|
|
processEnvironments: true
|
|
},
|
|
options: {
|
|
ignoreHtmlClass: ".*|",
|
|
processHtmlClass: "arithmatex"
|
|
}
|
|
};
|
|
|
|
document$.subscribe(() => { // (1)!
|
|
MathJax.typesetPromise()
|
|
})
|
|
```
|
|
|
|
1. This integrates MathJax with [instant loading].
|
|
|
|
=== ":octicons-file-code-16: mkdocs.yml"
|
|
|
|
``` yaml
|
|
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]
|
|
|
|
[Arithmatex]: ../setup/extensions/python-markdown-extensions.md#arithmatex
|
|
[instant loading]: ../setup/setting-up-navigation.md#instant-loading
|
|
|
|
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
|
|
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
|
|
<script>
|
|
window.MathJax = {
|
|
tex: {
|
|
inlineMath: [["\\(", "\\)"]],
|
|
displayMath: [["\\[", "\\]"]],
|
|
processEscapes: true,
|
|
processEnvironments: true
|
|
},
|
|
options: {
|
|
ignoreHtmlClass: ".*|",
|
|
processHtmlClass: "arithmatex"
|
|
}
|
|
};
|
|
</script>
|
|
|
|
## Usage
|
|
|
|
### Using block syntax
|
|
|
|
Blocks must be enclosed in `#!latex $$...$$` or `#!latex \[...\]` on separate
|
|
lines:
|
|
|
|
``` latex title="MathJax, block syntax"
|
|
$$
|
|
\operatorname{ker} f=\{g\in G:f(g)=e_{H}\}{\mbox{.}}
|
|
$$
|
|
```
|
|
|
|
<div class="result" markdown>
|
|
|
|
$$
|
|
\operatorname{ker} f=\{g\in G:f(g)=e_{H}\}{\mbox{.}}
|
|
$$
|
|
|
|
</div>
|
|
|
|
### Using inline block syntax
|
|
|
|
Inline blocks must be enclosed in `#!latex $...$` or `#!latex \(...\)`:
|
|
|
|
``` latex title="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)$.
|
|
```
|
|
|
|
<div class="result" markdown>
|
|
|
|
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)$.
|
|
|
|
</div>
|