Added MathJax reference

docs/reference/code-blocks.md

@@ -53,7 +53,7 @@ configuring syntax highlighting of code blocks:
         respective stylesheet and JavaScript from a [CDN][9] serving
         Highlight.js in `mkdocs.yml`:
 
-        === "docs/javascripts/extra.js"
+        === "docs/javascripts/config.js"
 
             ``` js
             hljs.initHighlighting()
@@ -64,7 +64,7 @@ configuring syntax highlighting of code blocks:
             ``` yaml
             extra_javascript:
               - https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/highlight.min.js
-              - javascripts/extra.js
+              - javascripts/config.js
             extra_css:
               - https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/default.min.css
             ```

docs/reference/mathjax.md

@@ -0,0 +1,126 @@
+---
+template: overrides/main.html
+---
+
+# MathJax
+
+[MathJax][1] is a beautiful and accessible way to display _mathematical content_
+in the browser, allows for writing formulas in different notations, including 
+[LaTeX][2], [MathML][3] and [AsciiMath][4], and can be easily integrated with 
+Material for MkDocs.
+
+  [1]: https://www.mathjax.org/
+  [2]: https://en.wikibooks.org/wiki/LaTeX/Mathematics
+  [3]: https://en.wikipedia.org/wiki/MathML
+  [4]: http://asciimath.org/
+
+## Configuration
+
+### Arithmatex
+
+[:octicons-file-code-24: Source][5] · [:octicons-workflow-24: Extension][6]
+
+The [Arithmatex][6] extension, which is part of of [Python Markdown
+Extensions][7], allows rendering block-style and inline equations, and can be
+enabled via `mkdocs.yml`:
+
+``` yaml
+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][8]:
+
+=== "docs/javascript/config.js"
+
+    ``` js
+    window.MathJax = {
+      tex: {
+        inlineMath: [["\\(", "\\)"]],
+        displayMath: [["\\[", "\\]"]],
+        processEscapes: true,
+        processEnvironments: true
+      },
+      options: {
+        ignoreHtmlClass: ".*|",
+        processHtmlClass: "arithmatex"
+      }
+    };
+    ```
+
+=== "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][6] for more 
+information._
+
+<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>
+
+  [5]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/extensions/pymdownx/_arithmatex.scss
+  [6]: https://facelessuser.github.io/pymdown-extensions/extensions/arithmatex/
+  [7]: https://facelessuser.github.io/pymdown-extensions/extensions/
+  [8]: ../customization.md#additional-javascript
+
+## Usage
+
+### Using block syntax
+
+When using LaTeX syntax, blocks must be enclosed in `#!latex $$...$$` on 
+separate lines:
+
+_Example_:
+
+``` latex
+$$
+\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 syntax
+
+When using LaTeX syntax, inline blocks must be enclosed in `#!latex $...$`:
+
+_Example_:
+
+``` latex
+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)$.

material/assets/manifest.json

@@ -5,8 +5,8 @@
   "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.877163d5.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.a68abb33.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.a68abb33.min.js.map",
-  "assets/stylesheets/main.css": "assets/stylesheets/main.d2af3d17.min.css",
-  "assets/stylesheets/main.css.map": "assets/stylesheets/main.d2af3d17.min.css.map",
+  "assets/stylesheets/main.css": "assets/stylesheets/main.5be48db2.min.css",
+  "assets/stylesheets/main.css.map": "assets/stylesheets/main.5be48db2.min.css.map",
   "assets/stylesheets/overrides.css": "assets/stylesheets/overrides.5036298b.min.css",
   "assets/stylesheets/overrides.css.map": "assets/stylesheets/overrides.5036298b.min.css.map",
   "assets/stylesheets/palette.css": "assets/stylesheets/palette.89d31e3b.min.css",

material/base.html

@@ -41,7 +41,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.d2af3d17.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.5be48db2.min.css' | url }}">
       {% if palette.scheme or palette.primary or palette.accent %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.89d31e3b.min.css' | url }}">
       {% endif %}

mkdocs.yml

@@ -109,7 +109,8 @@ markdown_extensions:
   - markdown.extensions.meta
   - markdown.extensions.toc:
       permalink: true
-  - pymdownx.arithmatex
+  - pymdownx.arithmatex:
+      generic: true
   - pymdownx.betterem:
       smart_enable: all
   - pymdownx.caret
@@ -167,6 +168,7 @@ nav:
     - Footnotes: reference/footnotes.md
     - Icons + Emojis: reference/icons-emojis.md
     - Lists: reference/lists.md
+    - MathJax: reference/mathjax.md
     - Meta tags: reference/meta-tags.md
   - Changelog:
     - Release notes: changelog.md

src/assets/stylesheets/main/extensions/pymdownx/_arithmatex.scss

@@ -29,26 +29,22 @@
 // Scoped in typesetted content to match specificity of regular content
 .md-typeset {
 
-  // MathJax integration - add padding to omit vertical scrollbar
-  .MJXc-display {
-    margin: 0.75em 0;
-    padding: 0.75em 0;
-    overflow: auto;
-    touch-action: auto;
-  }
-
-  // Stretch top-level containers
-  > p > .MJXc-display {
+  // Scroll math block on overflow
+  div.arithmatex {
+    overflow-x: scroll;
 
     // [mobile -]: Stretch to whole width
     @include break-to-device(mobile) {
-      margin: 0.75em px2rem(-16px);
-      padding: 0.25em px2rem(16px);
-    }
+      margin: 0 px2rem(-16px);
     }
 
-  // Remove outline on tab index
-  .MathJax_CHTML {
-    outline: 0;
+    // MathJax integration
+    > * {
+      width: min-content;
+      margin: 1em auto !important;
+      padding: 0 px2rem(16px);
+      overflow: auto;
+      touch-action: auto;
+    }
   }
 }