v1.4.0: updated and simplified KaTeX config

Author: mahrud

_config.yml

@@ -26,9 +26,15 @@ collections:
 markdown: kramdown
 
 kramdown:
+  # we use KaTeX
+  math_engine: null
+  # ↩ followed by a symbol to prevent emoji conversion
   footnote_backlink: "↩︎"
-  enable_coderay: false
-#  math_engine: null # pending https://github.com/github/pages-gem/pull/545
+  # don't make typographical conversions like >> to »
+  gfm_quirks: [no_auto_typographic]
+  # disables syntax highlighter
+  #syntax_highlighter_opts:
+  #  disable: true
 
 # Exclusions from the final site
 exclude:

_includes/head.html

@@ -30,42 +30,31 @@
     <meta property="og:image:height"   content="200" />
 
     <!-- KaTeX -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.css"
-      integrity="sha384-yFRtMMDnQtDRO8rLpMIKrtPCD5jdktao2TV19YiZYWMDkUR5GQZR/NOVTdquEx1j" crossorigin="anonymous" />
-    <script src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.js"
-      integrity="sha384-9Nhn55MVVN0/4OFx7EE5kpFBPsEMZxKTCnA+4fqDmg12eCTqGi6+BB2LjY8brQxJ" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css"
+      integrity="sha384-zh0CIslj+VczCZtlzBcjt5ppRcsAmDnRem7ESsYwWwg3m/OaJ2l4x7YBZl9Kxxib" crossorigin="anonymous"/>
+    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.js"
+      integrity="sha384-Rma6DA2IPUwhNxmrB/7S3Tno0YY7sFu9WSYMCuulLhIqYSGZ2gKCJWIqhBWqMQfh" crossorigin="anonymous"></script>
     <!-- KaTeX auto-render extention: https://katex.org/docs/autorender.html -->
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js"
-      integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js"
+      integrity="sha384-hCXGrW6PitJEwbkoStFjeJxv+fSOOQKOPbJxSfM6G5sWZjAyWhXiTIIAmQqnlLlh" crossorigin="anonymous"></script>
+    <!-- KaTeX copy-tex extention: https://github.com/KaTeX/KaTeX/tree/main/contrib/copy-tex -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/copy-tex.min.js"
+      integrity="sha384-HORx6nWi8j5/mYA+y57/9/CZc5z8HnEw4WUZWy5yOn9ToKBv1l58vJaufFAn9Zzi" crossorigin="anonymous"></script>
     <script>
       var macros = {
-          "\\P": "\\mathbb{P}"
-      }, delimiters = [
-          { left: "$$",  right: "$$",  display: true}, // Technically, this does not work. See below.
-          { left: "\\[", right: "\\]", display: true},
-          { left: "$",   right: "$",   display: false},
-          { left: "\\(", right: "\\)", display: false}
-      ];
+          "\\PP": "\\mathbb{P}", "\\AA": "\\mathbb{A}", "\\NN": "\\mathbb{N}", "\\ZZ": "\\mathbb{Z}",
+          "\\kk": "\\mathbb{k}", "\\QQ": "\\mathbb{Q}", "\\RR": "\\mathbb{R}", "\\CC": "\\mathbb{C}",
+      };
 
-      document.addEventListener("DOMContentLoaded", function() {
-        renderMathInElement(document.body, { delimiters: delimiters, macros: macros });
+      function renderKaTeX() {
+	  renderMathInElement(document.body, { macros: macros });
+	  // KaTeX auto-renders $$..$$, \\(..\\), \\[..\\], and equation, align, gather, and CD envs, but not $..$!
+	  renderMathInElement(document.body, { macros: macros, delimiters: [{ left: "$", right: "$", display: false }] });
+      }
 
-        // Currently GitHub pages overrides math-engine: mathjax in _config, hence $$..$$ are converted to to scripts tags.
-        // See: https://github.com/github/pages-gem/pull/545
-        document.querySelectorAll("script[type='math/tex']").forEach(function(el) {
-          el.outerHTML = katex.renderToString(el.textContent, { displayMode: false, macros: macros });
-        });
-
-        document.querySelectorAll("script[type='math/tex; mode=display']").forEach(function(el) {
-          el.outerHTML = katex.renderToString(el.textContent.replace(/%.*/g, ''), { displayMode: true, macros: macros });
-        });
-      });
+      document.addEventListener("DOMContentLoaded", renderKaTeX);
     </script>
     <style>.katex { font-size: 1.15em; }</style>
-    <!-- KaTeX copy-tex extention: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex -->
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/copy-tex.css" rel="stylesheet" type="text/css" />
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/copy-tex.min.js"
-      integrity="sha384-XhWAe6BtVcvEdS3FFKT7Mcft4HJjPqMQvi5V4YhzH9Qxw497jC13TupOEvjoIPy7" crossorigin="anonymous"></script>
 
     {%- if site.gtag %}
     <!-- Global site tag (gtag.js) - Google Analytics -->

_posts/2019-05-27-katex.md

@@ -8,21 +8,24 @@ date: 2019-05-27
 Proof supports the typesetting mathematics using [$\KaTeX$](https://katex.org).
 You can use `$ .. $` to write formulas following the $\LaTeX$ math syntax:
 
-~~~ markdown
+```tex
 The function $\nu$ is written inline, but can also be in a block:
 \\[ \nu: \mathbb{P}^{1} \to \mathbb{P}^{3} \\]
-~~~
+```
 
 The function $\nu$ is written inline, but can also be in a block:
-\\[ \nu: \R\P^{1} \to \P^{3}. \\]
+\\[ \nu: \R\PP^{1} \to \PP^{3}. \\]
 
 Multiple math formats work:
-- `$5\times 5$` gives $5\times 5.$
+
 - `\\(5\times 5\\)` gives \\(5\times 5.\\)
+- `$5\times 5$` gives $5\times 5.$
 - `\\[5\times 5.\\]` gives: \\[5\times 5.\\]
+- `$$5\times 5$$` (on a separate line) gives
 
-**Note:** while `$$ 5\times 5 $$` also works, it will enclose the math in a 
-script tag, which is undesirable[^katex].
+$$5\times 5.$$
+
+**Note:** while `$$ 5\times 5 $$` works, it will enclose the math in a separate block, which is undesirable.
 
 $\KaTeX$ supports a [long list] of fonts and functions, but you can also add
 $\LaTeX$ macros in `<script>` tags. For instance:
@@ -37,17 +40,46 @@ macros["\\f"] = "\\mathscr{F}"
 macros["\\f"] = "\\mathscr{F}"
 </script>
 
-\\[ 0\to\Gamma_Y(X,\f')\to\Gamma_Y(X,\f)\to\Gamma_Y(X,\f'')\to 0. \\]
+$$ 0\to\Gamma_Y(X,\f')\to\Gamma_Y(X,\f)\to\Gamma_Y(X,\f'')\to 0. $$
+
+$\KaTeX$ even has support for commutative diagrams, though for now only using
+the [amscd](https://tug.ctan.org/macros/latex/required/amsmath/amscd.pdf)
+syntax, which does not allow diagonal arrows for instance.
+
+<div markdown=0>
+\begin{CD}
+A       @>{a}>>  B  \\
+@V{b}VV      @VV{c}V \\
+C       @>{d}>>  D
+\end{CD}
+</div>
+
+So do numbered equations, in `equation`, `align`, and `gather`.
+
+<div markdown=0>
+\begin{equation}
+\begin{split}   a &=b+c\\
+      &=e+f
+\end{split}
+\end{equation}
+</div>
+
+To use either of these, your input needs to be excluded from Markdown processing like this:
+
+~~~ html
+<div markdown=0>
+\begin{CD}
+...
+\end{CD}
+</div>
+~~~
 
 If you are not familiar with writing mathematics in $\LaTeX$, I highly 
 recommend reading and bookmarking this [Wikibooks reference] and using
 it to typeset problem sets or exercises to practice. Another great reference
 is [this "short" guide] by the AMS. To learn more about $\LaTeX$ itself,
 [D.R.Wilkins' Primer] is a decent place to start.
 
-[^katex]:
-    This will change once this [issue](https://github.com/github/pages-gem/pull/545) is fixed.
-
 [long list]: https://katex.org/docs/supported.html
 [Wikibooks reference]: https://en.wikibooks.org/wiki/LaTeX/Mathematics
 [this "short" guide]: https://mirrors.ibiblio.org/CTAN/info/short-math-guide/short-math-guide.pdf