From 8c33e67684bcc9f44baf2603d84d1129b91da401 Mon Sep 17 00:00:00 2001
From: Skywt2003 <skywt2003@gmail.com>
Date: Fri, 22 Oct 2021 18:50:52 +0800
Subject: [PATCH] =?UTF-8?q?Footer=20=E8=A7=84=E8=8C=83=E5=8C=96=20&=20?=
 =?UTF-8?q?=E9=9B=86=E6=88=90=20KaTeX?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md  |  6 ++++++
 footer.php | 35 ++++++++++++++++++++++++++++++++++-
 header.php |  3 +++
 3 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 7b65d69..f97022b 100644
--- a/README.md
+++ b/README.md
@@ -15,6 +15,10 @@ Demo：[skywt.cn](https://skywt.cn/)
 
 建议在「Typecho 后台设置 - 阅读 - 站点首页」中选择「直接调用 homepage.php 模板文件」，体验一个简洁的全屏首页。
 
+### 关于 KaTeX
+
+遵从 Markdown 语法，在写作中单个美元符号 `$` 中的是行内公式，两个美元符号 `$$` 中的是单行公式。
+
 ### 关于字段（themeFields）
 
 - 文章头图地址：填入一个图片 URL 地址, 就可以让文章加上头图。
@@ -27,6 +31,7 @@ Demo：[skywt.cn](https://skywt.cn/)
 
 集成了 highlight.js，不建议使用其他代码高亮的插件。
 集成了 darkreader.js，不建议使用其他启用 Darkmode 的插件。
+集成了 KaTeX ，不建议使用其他数学公式插件。
 
 - [Argon Design System](https://demos.creative-tim.com/argon-design-system/index.html)
   - jQuery (via jsDelivr)
@@ -36,6 +41,7 @@ Demo：[skywt.cn](https://skywt.cn/)
 - highlight.js (via jsDelivr)
 - darkreader.js (vis jsDelivr)
 - [lately.js](https://github.com/Tokinx/lately)
+- KaTeX
 
 ### 关于浏览器支持
 
diff --git a/footer.php b/footer.php
index 4b62c24..4c0eec2 100644
--- a/footer.php
+++ b/footer.php
@@ -4,6 +4,7 @@
     </div>
 </div><!-- end #body -->
 
+<!-- Advanced styles -->
 <script>
     $(document).ready(function(){
         $("article .post-content img").addClass("img-fluid mx-auto d-block shadow rounded");
@@ -11,8 +12,40 @@
         $("article pre").addClass("shadow rounded");
         $("table").addClass("table");
     });
-    Lately({'target' : '.lately'});
 </script>
+
+<!-- lately.js -->
+<script>Lately({'target' : '.lately'});</script>
+
+<!-- KaTeX js via jsDelivr -->
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.18/dist/contrib/auto-render.min.js"></script>
+<script>
+    function triggerRenderingLaTeX(element) {
+        renderMathInElement(
+            element,
+            {
+                delimiters: [
+                    {left: "$$", right: "$$", display: true},
+                    {left: "$", right: "$", display: false},
+                ]
+            }
+        );
+    }
+    document.addEventListener("DOMContentLoaded", function() {
+        triggerRenderingLaTeX(document.body);
+    });
+    document.addEventListener("DOMContentLoaded", function() {
+        var wmdPreviewLink = document.querySelector("a[href='#wmd-preview']");
+        var wmdPreviewContainer = document.querySelector("#wmd-preview");
+        if(wmdPreviewLink && wmdPreviewContainer) {
+            wmdPreviewLink.onclick = function() {
+                triggerRenderingLaTeX(wmdPreviewContainer);
+            };
+        }
+    });
+</script>
+
 <footer class="mt-5 mb-5" id="footer" role="footer">
     <div class="container">
         <hr>
diff --git a/header.php b/header.php
index 7a1d012..26f1ba0 100644
--- a/header.php
+++ b/header.php
@@ -45,6 +45,9 @@
     <script src="https://cdn.jsdelivr.net/npm/darkreader@4.9.34/darkreader.min.js"></script>
     <script>DarkReader.auto({brightness:100, contrast:90, sepia:10});</script>
 
+    <!-- KaTeX css via jsDelivr-->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.css">
+
     <?php $this->header(); ?>
 </head>
 <!--[if lt IE 8]>