From 6edd6d97d2416fa05d0b50514ec8d5643495386f Mon Sep 17 00:00:00 2001
From: Lolipop <lolipop0703@qq.com>
Date: Sun, 18 Jul 2021 16:17:21 +0800
Subject: [PATCH] feat(MathJax): add MathJax support

Thanks to #268

Here I modify MathJax support doc for better performance.

Also fix polyfill support of Algolia and MathJax.
---
 README.md                        | 25 ++++++++++++++++++++-----
 _config.yml                      | 11 ++++++-----
 layout/_partial/math/mathjax.ejs | 13 +++++++++++++
 layout/layout.ejs                |  8 +++++---
 layout/mathjax.ejs               | 29 -----------------------------
 layout/post.ejs                  |  4 ++--
 6 files changed, 46 insertions(+), 44 deletions(-)
 create mode 100644 layout/_partial/math/mathjax.ejs
 delete mode 100644 layout/mathjax.ejs

diff --git a/README.md b/README.md
index af4d42e0..fe212259 100644
--- a/README.md
+++ b/README.md
@@ -133,18 +133,34 @@ mermaid:
 
 > ❗️❗️❗️ 注意：如果您需要使用**类图**，请编辑您 Hexo 根目录下的 `_config.yml` 文件，设置 `external_link: false`。请确保这个设置对您原来的博客功能没有影响，这是 Hexo 本身的 bug。
 
-## 启用 LaTeX
+## 启用 LaTeX 数学公式
 
-Archer 主题已经内置了 MathJax，但是您需要替换 Hexo 默认的渲染引擎来支持解析 LaTeX 语法。
+这个[维基页面](https://github.com/fi3ework/hexo-theme-archer/wiki/%E5%90%AF%E7%94%A8-Latex-%E6%94%AF%E6%8C%81)包括完整的介绍。
+
+Archer 主题已经内置了 MathJax，但是您需要**替换 Hexo 默认的 Markdown 渲染引擎**来支持解析 LaTeX 数学公式语法。此示例中将替换为 [`hexo-renderer-pandoc`](https://github.com/wzpan/hexo-renderer-pandoc)。
+
+请留意：替换渲染引擎可能会带来编写上的区别，或导致一些潜在的问题。
+
+首先，确保系统中已经[安装了 `pandoc`](https://pandoc.org/installing.html)，版本不低于 2.0。
 
 在 Hexo 根目录下执行下面的命令：
 
 ``` bash
+# 卸载默认的渲染引擎
 npm uninstall hexo-renderer-marked --save
-npm install hexo-renderer-kramed --save
+# 安装 hexo-renderer-pandoc
+npm install hexo-renderer-pandoc --save
+```
+
+在 Archer 主题目录下的 `_config.yml` 设置以启用 LaTeX 数学公式：
+
+``` yml
+math:
+  mathjax:
+    enable: true
 ```
 
-对需要启用 LaTeX 的文章的 Front-matter 中添加 `mathjax: true` 字段。测试 LaTeX 是否启用成功，您可以在这篇文章中添加下面的内容：
+最后，在需要启用 LaTeX 数学公式的文章的 Front-matter 中添加 `mathjax: true` 字段即可。测试是否启用成功，您可以在这篇文章中添加下面的内容：
 
 ``` markdown
 \begin{equation}
@@ -171,7 +187,6 @@ z=\dfrac{3\pi}{2}(1+2t)\sin(\dfrac{3\pi}{2}(1+2t)), &
 - [置顶文章](https://www.jianshu.com/p/42a4efcdf8d7)
 - [设置文章版权信息](https://github.com/fi3ework/hexo-theme-archer/wiki/%E8%AE%BE%E7%BD%AE%E6%96%87%E7%AB%A0%E7%89%88%E6%9D%83%E4%BF%A1%E6%81%AF)
 - [启用站内搜索](https://github.com/fi3ework/hexo-theme-archer/wiki/%E5%90%AF%E7%94%A8-Algolia-%E6%90%9C%E7%B4%A2)
-- [启用 Latex 支持](https://github.com/fi3ework/hexo-theme-archer/wiki/%E5%90%AF%E7%94%A8-Latex-%E6%94%AF%E6%8C%81)
 - [切换为英文界面](https://github.com/fi3ework/hexo-theme-archer/wiki/%E8%8B%B1%E6%96%87%E7%95%8C%E9%9D%A2)
 
 ## 更新主题
diff --git a/_config.yml b/_config.yml
index 85380671..b2441031 100644
--- a/_config.yml
+++ b/_config.yml
@@ -151,10 +151,11 @@ outdated_threshold: 0
 # Mermaid Chart: https://github.com/knsv/mermaid
 mermaid:
   enable: false
-  version: 8.11.0
+  version: 8.11.0 # Version number '8' is for the latest '8.x' version of Mermaid.
   theme: dark
   options: # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
-# MathJax Support
-mathjax:
-  enable: true
-  cdn: https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js?config=TeX-AMS-MML_HTMLorMML
\ No newline at end of file
+# LaTeX Math Equations Support
+math:
+  mathjax:
+    enable: false
+    version: 3.2.0 # specified version number no less than '3.0.0', or you need to modify the CDN link manually. Version number '3' is for the latest '3.x' version of MathJax.
\ No newline at end of file
diff --git a/layout/_partial/math/mathjax.ejs b/layout/_partial/math/mathjax.ejs
new file mode 100644
index 00000000..319102be
--- /dev/null
+++ b/layout/_partial/math/mathjax.ejs
@@ -0,0 +1,13 @@
+<% if (theme.math.mathjax.enable === true) { %>
+    <script>
+        MathJax = {
+            tex: {
+                inlineMath: [['$', '$'], ['\\(', '\\)']],
+                skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
+            }
+        };
+    </script>
+
+    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@<%- theme.math.mathjax.version %>/es5/tex-mml-chtml.js"></script>
+<% } %>
diff --git a/layout/layout.ejs b/layout/layout.ejs
index 896bb10d..cc248c32 100755
--- a/layout/layout.ejs
+++ b/layout/layout.ejs
@@ -53,12 +53,14 @@
         <script src="<%- url_for('scripts/main.js') %>"></script>
         <!-- algolia -->
         <% if (theme.algolia_search.enable) { %>
+            <!-- algolia browser support -->
+            <script src="https://polyfill.io/v3/polyfill.min.js?features=default%2CArray.prototype.find%2CArray.prototype.includes%2CPromise%2CObject.assign%2CObject.entries"></script>
+            <!-- algolia layout -->
             <%- partial('_partial/algolia') %>
-            <script src="<%- url_for('scripts/search.js') %>" defer></script>
+            <!-- algolia source -->
             <script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.10.3/dist/algoliasearch-lite.umd.js" crossorigin="anonymous"></script>
             <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.24.1/dist/instantsearch.production.min.js" crossorigin="anonymous"></script>
-            <!-- algolia browser support -->
-            <script src="https://polyfill.io/v3/polyfill.min.js?features=default%2CArray.prototype.find%2CArray.prototype.includes%2CPromise%2CObject.assign%2CObject.entries"></script>
+            <script src="<%- url_for('scripts/search.js') %>" defer></script>
         <% } %>
         <!-- busuanzi -->
         <% if (theme.busuanzi) { %>
diff --git a/layout/mathjax.ejs b/layout/mathjax.ejs
deleted file mode 100644
index 31e6267f..00000000
--- a/layout/mathjax.ejs
+++ /dev/null
@@ -1,29 +0,0 @@
-<% if (theme.mathjax.enable){ %>
-    <script type="text/x-mathjax-config">
-      MathJax.Hub.Config({
-          tex2jax: {
-            inlineMath: [ ['$','$'], ["\\(","\\)"] ],
-            processEscapes: true
-          }
-        });
-      </script>
-
-    <script type="text/x-mathjax-config">
-      MathJax.Hub.Config({
-            tex2jax: {
-              skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
-            }
-          });
-      </script>
-
-    <script type="text/x-mathjax-config">
-      MathJax.Hub.Queue(function() {
-              var all = MathJax.Hub.getAllJax(), i;
-              for(i=0; i < all.length; i += 1) {
-                  all[i].SourceElement().parentNode.className += ' has-jax';
-              }
-          });
-      </script>
-
-    <script type="text/javascript" src="<%- theme.mathjax.cdn %>"></script>
-<% } %>
\ No newline at end of file
diff --git a/layout/post.ejs b/layout/post.ejs
index ffa7e2af..eb9d52b6 100644
--- a/layout/post.ejs
+++ b/layout/post.ejs
@@ -1,6 +1,6 @@
 <main class="main post-page">
-    <% if (page.mathjax == true){ %>
-        <%- partial('mathjax') %>
+    <% if (page.mathjax === true) { %>
+        <%- partial('_partial/math/mathjax') %>
     <% } %>
     <article class="article-entry">
         <%- page.content %>