From adfbe18e6425de7dbc1035195eab5f0e8a622acd Mon Sep 17 00:00:00 2001
From: Maruan Al-Shedivat <alshedivat.maruan@gmail.com>
Date: Tue, 22 Sep 2020 22:26:13 -0400
Subject: [PATCH] Switch to MathJax 3.x. Fixes #115.

---
 _config.yml                  | 10 ++----
 _includes/head.html          | 58 ++++++++++++++++++++++++++++++++++
 _includes/hemline.html       | 60 ------------------------------------
 _layouts/default.html        |  2 --
 _layouts/distill.html        |  4 +--
 _posts/2015-10-20-math.md    |  4 +--
 _posts/2018-12-22-distill.md |  6 ++--
 assets/js/katex.js           | 15 ---------
 8 files changed, 67 insertions(+), 92 deletions(-)
 delete mode 100644 _includes/hemline.html
 delete mode 100644 assets/js/katex.js

diff --git a/_config.yml b/_config.yml
index 3bdeafd..a627c94 100644
--- a/_config.yml
+++ b/_config.yml
@@ -146,9 +146,8 @@ scholar:
 # -----------------------------------------------------------------------------
 
 enable_google_analytics:  false
-enable_katex:             true
 enable_mansory:           true
-enable_progressbar:       true
+enable_math:              true
 enable_tooltips:          false
 show_social_icons:        false
 
@@ -170,11 +169,8 @@ fontawesome:
 jquery:
   version: "3.5.1"
   integrity: "sha512-/DXTXr6nQodMUiq+IUJYCt2PPOUjrHJ9wFrqpJ3XkgPNOZVfMok7cRw6CSxyCQxXn6ozlESsSh1/sMCTF1rL/g=="
-katex:
-  version: "0.12.0"
-  integrity:
-    css: "sha512-h7nl+xz8wgDlNM4NqKEM4F1NkIRS17M9+uJwIGwuo8vGqIl4BhuCKdxjWEINm+xyrUjNCnK5dCrhM0sj+wTIXw=="
-    js: "sha512-/CMIhXiDA3m2c9kzRyd97MTb3MC6OVnx4TElQ7fkkoRghwDf6gi41gaT1PwF270W6+J60uTmwgeRpNpJdRV6sg=="
+mathjax:
+  version: "3.1.2"
 mansory:
   version: "4.2.2"
   integrity: "sha256-Nn1q/fx0H7SNLZMQ5Hw5JLaTRZp0yILA/FRexe19VdI="
diff --git a/_includes/head.html b/_includes/head.html
index 999cdd7..02b7a0a 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -8,6 +8,10 @@
 <!-- Bootstrap & MDB -->
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/{{ site.bootstrap.version }}/css/bootstrap.min.css" rel="stylesheet" integrity="{{ site.bootstrap.integrity.css }}" crossorigin="anonymous">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/{{ site.mdb.version }}/css/mdb.min.css" integrity="{{ site.mdb.integrity.css }}" crossorigin="anonymous" />
+<script defer src="https://code.jquery.com/jquery-{{ site.jquery.version }}.slim.min.js" integrity="{{ site.jquery.integrity }}" crossorigin="anonymous"></script>
+<script defer src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/{{ site.popper.version }}/umd/popper.min.js" integrity="{{ site.popper.integrity }}" crossorigin="anonymous"></script>
+<script defer src="https://stackpath.bootstrapcdn.com/bootstrap/{{ site.bootstrap.version }}/js/bootstrap.min.js" integrity="{{ site.bootstrap.integrity.js }}" crossorigin="anonymous"></script>
+<script defer src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/{{ site.mdb.version }}/js/mdb.min.js"  integrity="{{ site.mdb.integrity.js }}" crossorigin="anonymous"></script>
 
 <!-- Fonts & Icons -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/{{ site.fontawesome.version }}/css/all.min.css"  integrity="{{ site.fontawesome.integrity }}" crossorigin="anonymous">
@@ -29,3 +33,57 @@
 <meta property="og:description" content="{{ page.title }}" />
 <meta property="og:image" content="{%- if page.og_image -%}{{ page.og_image }}{%- else -%}{{ site.og_image }}{%- endif -%}" />
 {% endif %}
+
+<!-- Load Common JS -->
+<script defer src="{{ '/assets/js/common.js' | relative_url }}"></script>
+
+<!-- Code Syntax Highlighting -->
+<link rel="stylesheet" href="https://gitcdn.link/repo/jwarby/jekyll-pygments-themes/master/{{ site.highlight_theme }}.css" />
+
+{% if site.enable_math %}
+<!-- Load MathJax -->
+<script defer type="text/javascript" id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@{{ site.mathjax.version }}/es5/tex-mml-chtml.js"></script>
+<script defer src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+{% endif %}
+
+{% if site.enable_mansory %}
+<!-- Load Mansory & imagesLoaded -->
+<script defer src="https://cdnjs.cloudflare.com/ajax/libs/masonry/{{ site.mansory.version }}/masonry.pkgd.min.js" integrity="{{ site.masonry.integrity }}" crossorigin="anonymous"></script>
+<script defer src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
+
+<!-- Project Cards Layout -->
+<script defer type="text/javascript">
+  // Init Masonry
+  var $grid = $('.grid').masonry({
+    gutter: 10,
+    horizontalOrder: true,
+    itemSelector: '.grid-item',
+  });
+  // layout Masonry after each image loads
+  $grid.imagesLoaded().progress( function() {
+    $grid.masonry('layout');
+  });
+</script>
+{% endif %}
+
+{% if site.enable_tooltips %}
+<!-- Enable Tooltips -->
+<script defer type="text/javascript">
+$(function () {
+  $('[data-toggle="tooltip"]').tooltip()
+})
+</script>
+{% endif %}
+
+{% if site.enable_google_analytics %}
+<!-- Google Analytics -->
+<script defer>
+(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+ga('create', '{{ site.google_analytics }}', 'auto');
+ga('send', 'pageview');
+</script>
+{% endif %}
diff --git a/_includes/hemline.html b/_includes/hemline.html
deleted file mode 100644
index 13f4fcc..0000000
--- a/_includes/hemline.html
+++ /dev/null
@@ -1,60 +0,0 @@
-<!-- Load Core and Bootstrap JS -->
-<script src="https://code.jquery.com/jquery-{{ site.jquery.version }}.slim.min.js" integrity="{{ site.jquery.integrity }}" crossorigin="anonymous"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/{{ site.popper.version }}/umd/popper.min.js" integrity="{{ site.popper.integrity }}" crossorigin="anonymous"></script>
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/{{ site.bootstrap.version }}/js/bootstrap.min.js" integrity="{{ site.bootstrap.integrity.js }}" crossorigin="anonymous"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/{{ site.mdb.version }}/js/mdb.min.js"  integrity="{{ site.mdb.integrity.js }}" crossorigin="anonymous"></script>
-
-<!-- Load Common JS -->
-<script src="{{ '/assets/js/common.js' | relative_url }}"></script>
-
-<!-- Code Syntax Highlighting -->
-<link rel="stylesheet" href="https://gitcdn.link/repo/jwarby/jekyll-pygments-themes/master/{{ site.highlight_theme }}.css" />
-
-{% if site.enable_katex %}
-<!-- Load KaTeX -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/{{ site.katex.version }}/katex.min.css" integrity="{{ site.katex.integrity.css }}" crossorigin="anonymous" />
-<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/{{ site.katex.version }}/katex.min.js" integrity="{{ site.katex.integrity.js }}" crossorigin="anonymous"></script>
-<script src="{{ '/assets/js/katex.js' | relative_url }}"></script>
-{% endif %}
-
-{% if site.enable_mansory %}
-<!-- Load Mansory & imagesLoaded -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/{{ site.mansory.version }}/masonry.pkgd.min.js" integrity="{{ site.masonry.integrity }}" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
-
-<!-- Project Cards Layout -->
-<script type="text/javascript">
-  // Init Masonry
-  var $grid = $('.grid').masonry({
-    gutter: 10,
-    horizontalOrder: true,
-    itemSelector: '.grid-item',
-  });
-  // layout Masonry after each image loads
-  $grid.imagesLoaded().progress( function() {
-    $grid.masonry('layout');
-  });
-</script>
-{% endif %}
-
-{% if site.enable_tooltips %}
-<!-- Enable Tooltips -->
-<script type="text/javascript">
-$(function () {
-  $('[data-toggle="tooltip"]').tooltip()
-})
-</script>
-{% endif %}
-
-{% if site.enable_google_analytics %}
-<!-- Google Analytics -->
-<script>
-(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-
-ga('create', '{{ site.google_analytics }}', 'auto');
-ga('send', 'pageview');
-</script>
-{% endif %}
diff --git a/_layouts/default.html b/_layouts/default.html
index a94e605..4487e15 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -23,6 +23,4 @@
 
   </body>
 
-  {% include hemline.html %}
-
 </html>
diff --git a/_layouts/distill.html b/_layouts/distill.html
index e9b8b52..1e01aee 100644
--- a/_layouts/distill.html
+++ b/_layouts/distill.html
@@ -12,7 +12,7 @@
   </head>
 
   <d-front-matter>
-    <script type="text/json">{
+    <script async type="text/json">{
       "title": "{{ page.title }}",
       "description": "{{ page.description }}",
       "published": "{{ page.date }}",
@@ -81,8 +81,6 @@
 
   </body>
 
-  {% include hemline.html %}
-
   <d-bibliography src="{{ page.bibliography | prepend: '/assets/bibliography/' | relative_url }}">
   </d-bibliography>
 
diff --git a/_posts/2015-10-20-math.md b/_posts/2015-10-20-math.md
index af32531..9b96b56 100644
--- a/_posts/2015-10-20-math.md
+++ b/_posts/2015-10-20-math.md
@@ -4,7 +4,7 @@ title: a post with math
 date: 2015-10-20 11:12:00-0400
 description: an example of a blog post with some math
 ---
-This theme supports rendering beautiful math in inline and display modes using [KaTeX](https://khan.github.io/KaTeX/) engine. You just need to surround your math expression with `$$`, like `$$ E = mc^2 $$`. If you leave it inside a paragraph, it will produce an inline expression, just like $$ E = mc^2 $$.
+This theme supports rendering beautiful math in inline and display modes using [MathJax 3](https://www.mathjax.org/){:target="\_blank"} engine. You just need to surround your math expression with `$$`, like `$$ E = mc^2 $$`. If you leave it inside a paragraph, it will produce an inline expression, just like $$ E = mc^2 $$.
 
 To use display mode, again surround your expression with `$$` and place it as a separate paragraph. Here is an example:
 
@@ -12,4 +12,4 @@ $$
 \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
 $$
 
-Note that [KaTeX](https://khan.github.io/KaTeX/) is work in progress, so it does not support the full range of math expressions as, say, [MathJax](https://www.mathjax.org/). Yet, it is [blazing fast](http://www.intmath.com/cg5/katex-mathjax-comparison.php).
+Note that MathJax 3 is [a major re-write of MathJax](https://docs.mathjax.org/en/latest/upgrading/whats-new-3.0.html){:target="\_blank"} that brought a significant improvement to the loading and rendering speed, which is now [on par with KaTeX](http://www.intmath.com/cg5/katex-mathjax-comparison.php){:target="\_blank"}.
diff --git a/_posts/2018-12-22-distill.md b/_posts/2018-12-22-distill.md
index dec8c91..7041f32 100644
--- a/_posts/2018-12-22-distill.md
+++ b/_posts/2018-12-22-distill.md
@@ -42,7 +42,7 @@ _styles: >
 
 ## Equations
 
-This theme supports rendering beautiful math in inline and display modes using [KaTeX](https://khan.github.io/KaTeX/) engine.
+This theme supports rendering beautiful math in inline and display modes using [MathJax 3](https://www.mathjax.org/){:target="\_blank"} engine.
 You just need to surround your math expression with `$$`, like `$$ E = mc^2 $$`.
 If you leave it inside a paragraph, it will produce an inline expression, just like $$ E = mc^2 $$.
 
@@ -53,8 +53,8 @@ $$
 \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
 $$
 
-Note that [KaTeX](https://khan.github.io/KaTeX/) is work in progress, so it does not support the full range of math expressions as, say, [MathJax](https://www.mathjax.org/).
-Yet, it is [blazing fast](http://www.intmath.com/cg5/katex-mathjax-comparison.php).
+Note that MathJax 3 is [a major re-write of MathJax](https://docs.mathjax.org/en/latest/upgrading/whats-new-3.0.html){:target="\_blank"} that brought a significant improvement to the loading and rendering speed, which is now [on par with KaTeX](http://www.intmath.com/cg5/katex-mathjax-comparison.php){:target="\_blank"}.
+
 
 ***
 
diff --git a/assets/js/katex.js b/assets/js/katex.js
deleted file mode 100644
index bc22bff..0000000
--- a/assets/js/katex.js
+++ /dev/null
@@ -1,15 +0,0 @@
-$("script[type='math/tex']").replaceWith(
-  function(){
-    var tex = $(this).text();
-    return "<span class=\"inline-equation\">" +
-           katex.renderToString(tex) +
-           "</span>";
-});
-
-$("script[type='math/tex; mode=display']").replaceWith(
-  function(){
-    var tex = $(this).text();
-    return "<div class=\"equation\">" +
-           katex.renderToString("\\displaystyle "+tex) +
-           "</div>";
-});