moved katex documentation to math.md

This commit is contained in:
Anurag Dhadse 2023-05-13 17:04:57 +05:30
parent 3bd214fce6
commit c1948b22ea
3 changed files with 37 additions and 75 deletions

View File

@ -1,70 +0,0 @@
---
icon: material/alphabet-greek
---
# MathJax
[KaTeX] is a Lightning-fast library to display mathematical expressions
in the browser.
[KaTeX]: https://katex.org/
KaTeX isn't supported by default, but can be easily integrated with Material for MkDocs.
## Configuration
This configuration enables support for rendering block and inline block
equations through [KaTex]. Create a configuration file and add the following
lines to `mkdocs.yml`:
=== ":octicons-file-code-16: `docs/javascripts/katex.js`"
``` js
document$.subscribe(() => { // (1)!
renderMathInElement(document.body, {
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: false},
{left: '\\(', right: '\\)', display: false},
{left: '\\[', right: '\\]', display: true},
],
});
})
```
1. This integrates MathJax with [instant loading].
=== ":octicons-file-code-16: `overrides/main.html`"
```html
{% extends "base.html" %}
{% block libs %}
<!--katex scripts-->
<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" />
<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>
<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>
{{ super() }}
{% endblock %}
```
=== ":octicons-file-code-16: `mkdocs.yml`"
``` yaml
extra_javascript:
- javascripts/katex.js
```
[instant loading]: ../setup/setting-up-navigation.md#instant-loading
## Usage
### Using block syntax
Blocks must be enclosed in `#!latex $$...$$` or `#!latex \[...\]` on separate
lines.
### Using inline block syntax
Inline blocks must be enclosed in `#!latex $...$` or `#!latex \(...\)`.

View File

@ -6,13 +6,14 @@ icon: material/alphabet-greek
[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
(e.g. [LaTeX], [MathML], [AsciiMath], [KaTeX]), 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/
[KaTeX]: https://katex.org/
## Configuration
@ -43,7 +44,24 @@ lines to `mkdocs.yml`:
1. This integrates MathJax with [instant loading].
=== ":octicons-file-code-16: `mkdocs.yml`"
=== ":octicons-file-code-16: `docs/javascripts/katex.js`"
``` js
document$.subscribe(() => { // (1)!
renderMathInElement(document.body, {
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: false},
{left: '\\(', right: '\\)', display: false},
{left: '\\[', right: '\\]', display: true},
],
});
})
```
1. This integrates KaTeX with [instant loading].
=== ":octicons-file-code-16: `mkdocs.yml` for MathJax"
``` yaml
markdown_extensions:
@ -51,11 +69,26 @@ lines to `mkdocs.yml`:
generic: true
extra_javascript:
- javascripts/mathjax.js
- javascripts/mathjax.js
- https://polyfill.io/v3/polyfill.min.js?features=es6
- https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
```
=== ":octicons-file-code-16: `mkdocs.yml` for KaTeX"
``` yaml
extra_javascript:
- javascripts/katex.js
- https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/katex.min.js # (1)!
- https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/contrib/auto-render.min.js
extra_css:
- https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/katex.min.css
```
1. Or you can adgitd these JS/CSS via `<script>` tag by overriding HTML files.
See additional configuration options:
- [Arithmatex]

View File

@ -219,8 +219,7 @@ nav:
- Icons, Emojis: reference/icons-emojis.md
- Images: reference/images.md
- Lists: reference/lists.md
- MathJax: reference/mathjax.md
- KaTeX: reference/katex.md
- Math: reference/math.md
- Tooltips: reference/tooltips.md
- Insiders:
- insiders/index.md