|
| 1 | +--- |
| 2 | +icon: material/alphabet-greek |
| 3 | +--- |
| 4 | + |
| 5 | +# MathJax |
| 6 | + |
| 7 | +[KaTeX] is a Lightning-fast library to display mathematical expressions |
| 8 | +in the browser. |
| 9 | + |
| 10 | + [KaTeX]: https://katex.org/ |
| 11 | + |
| 12 | +KaTeX isn't supported by default, but can be easily integrated with Material for MkDocs. |
| 13 | + |
| 14 | +## Configuration |
| 15 | + |
| 16 | +This configuration enables support for rendering block and inline block |
| 17 | +equations through [KaTex]. Create a configuration file and add the following |
| 18 | +lines to `mkdocs.yml`: |
| 19 | + |
| 20 | +=== ":octicons-file-code-16: `docs/javascripts/katex.js`" |
| 21 | + |
| 22 | + ``` js |
| 23 | + document$.subscribe(() => { // (1)! |
| 24 | + renderMathInElement(document.body, { |
| 25 | + delimiters: [ |
| 26 | + {left: '$$', right: '$$', display: true}, |
| 27 | + {left: '$', right: '$', display: false}, |
| 28 | + {left: '\\(', right: '\\)', display: false}, |
| 29 | + {left: '\\[', right: '\\]', display: true}, |
| 30 | + ], |
| 31 | + }); |
| 32 | + }) |
| 33 | + ``` |
| 34 | + |
| 35 | + 1. This integrates MathJax with [instant loading]. |
| 36 | + |
| 37 | +=== ":octicons-file-code-16: `overrides/main.html`" |
| 38 | + |
| 39 | + ```html |
| 40 | + {% extends "base.html" %} |
| 41 | + |
| 42 | + {% block libs %} |
| 43 | + <!--katex scripts--> |
| 44 | + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/katex.min.css" integrity="sha512-t2ALGTyUR6g1HJiHCmSTge2yGseGofdO88Q+zOWQx/N0ikecVw0YuyOet9xZDV8+Vx0Y0n1a3f3Qx3V9CcnsKA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> |
| 45 | + <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/katex.min.js" integrity="sha512-EKW5YvKU3hpyyOcN6jQnAxO/L8gts+YdYV6Yymtl8pk9YlYFtqJgihORuRoBXK8/cOIlappdU6Ms8KdK6yBCgA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> |
| 46 | + <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/contrib/auto-render.min.js" integrity="sha512-iWiuBS5nt6r60fCz26Nd0Zqe0nbk1ZTIQbl3Kv7kYsX+yKMUFHzjaH2+AnM6vp2Xs+gNmaBAVWJjSmuPw76Efg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> |
| 47 | + |
| 48 | + {{ super() }} |
| 49 | + {% endblock %} |
| 50 | + ``` |
| 51 | + |
| 52 | +=== ":octicons-file-code-16: `mkdocs.yml`" |
| 53 | + |
| 54 | + ``` yaml |
| 55 | + extra_javascript: |
| 56 | + - javascripts/katex.js |
| 57 | + ``` |
| 58 | + |
| 59 | + [instant loading]: ../setup/setting-up-navigation.md#instant-loading |
| 60 | + |
| 61 | +## Usage |
| 62 | + |
| 63 | +### Using block syntax |
| 64 | + |
| 65 | +Blocks must be enclosed in `#!latex $$...$$` or `#!latex \[...\]` on separate |
| 66 | +lines. |
| 67 | + |
| 68 | +### Using inline block syntax |
| 69 | + |
| 70 | +Inline blocks must be enclosed in `#!latex $...$` or `#!latex \(...\)`. |
0 commit comments