support mathjax

README.md

@@ -14,6 +14,7 @@
 - 增加了推荐文章列表，增加博客流量。
 - 增加了阅读统计。
 - 文末可以显示GitHub仓库卡片。
+- 支持渲染MathJax数学公式。
 
 
 
@@ -305,6 +306,13 @@ repo: xaoxuu/hexo-theme-material-x
 ---
 ```
 
+开启渲染MathJax数学公式
+```
+---
+mathjax: true
+---
+```
+
 
 ## 主题色和其他样式
 

layout/_partial/footer.ejs

@@ -16,3 +16,7 @@
     </div>
 
 </footer>
+<!-- 根据页面mathjax变量决定是否加载MathJax数学公式js -->
+<% if (page.mathjax){ %>
+    <%- partial('mathjax') %>
+<% } %>

layout/_partial/mathjax.ejs

@@ -0,0 +1,36 @@
+<!-- MathJax配置，可通过单美元符号书写行内公式等 -->
+<script type="text/x-mathjax-config">
+    MathJax.Hub.Config({
+        "HTML-CSS": {
+            preferredFont: "TeX",
+            availableFonts: ["STIX","TeX"],
+            linebreaks: { automatic:true },
+            EqnChunk: (MathJax.Hub.Browser.isMobile ? 10 : 50)
+        },
+        tex2jax: {
+            inlineMath: [ ["$", "$"], ["\\(","\\)"] ],
+            processEscapes: true,
+            ignoreClass: "tex2jax_ignore|dno",
+            skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
+        },
+        TeX: {
+            equationNumbers: { autoNumber: "AMS" },
+            noUndefined: { attributes: { mathcolor: "red", mathbackground: "#FFEEEE", mathsize: "90%" } },
+            Macros: { href: "{}" }
+        },
+        messageStyle: "none"
+    });
+</script>
+<!-- 给MathJax元素添加has-jax class -->
+<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>
+<!-- 通过连接CDN加载MathJax的js代码 -->
+<script type="text/javascript" async
+    src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
+</script>

layout/_partial/scripts.ejs

@@ -8,6 +8,7 @@
 <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
 <!-- github-cards -->
 <script src="//cdn.jsdelivr.net/github-cards/latest/widget.js"></script>
+
 <%- js('js/jquery.fitvids.js') %>
 <script>
 var GOOGLE_CUSTOM_SEARCH_API_KEY = "<%- theme.nav_search.google_api_key %>";