feat(KaTeX): add copy-tex and mhchem for KaTeX

assets/css/lib/katex/copy-tex.min.css

@@ -0,0 +1 @@
+.katex,.katex-display{user-select:all;-moz-user-select:all;-webkit-user-select:all;-ms-user-select:all}

exampleSite/config.toml

@@ -133,8 +133,18 @@ dateFormatToUse = "2006-01-02"
   # public git repo url to link lastmod git commit only then enableGitInfo is true
   gitRepo = ""
 
-  # whether to render mathematical formulas
-  math = true
+  # mathematical formulas (KaTeX)
+  [params.math]
+    enable = true
+    block_left_delimiter = ""
+    block_right_delimiter = ""
+    inline_left_delimiter = "$"
+    inline_right_delimiter = "$"
+    # KaTeX extension copy_tex
+    copy_tex = true
+    # KaTeX extension mhchem
+    mhchem = true
+
   # whether to show link to Raw Markdown content of the post
   linkToMarkdown = true
 
@@ -159,6 +169,9 @@ dateFormatToUse = "2006-01-02"
     katex_css = ''
     katex_js = ''
     katex_auto_render_js = ''
+    katex_copy_tex_css = ''
+    katex_copy_tex_js = ''
+    katex_mhchem_js = ''
     mermaid_js = ''
     echarts_js = ''
     echarts_macarons_js = ''

exampleSite/zh/config.toml

@@ -133,8 +133,18 @@ dateFormatToUse = "2006-01-02"
   # 用于生成文章上次修改时间的公共 git 仓库路径，仅在 enableGitInfo 设为 true 时有效
   gitRepo = ""
 
-  # 是否渲染数学公式
-  math = true
+  # 数学公式 (KaTeX https://katex.org/)
+  [params.math]
+    enable = true
+    block_left_delimiter = ""
+    block_right_delimiter = ""
+    inline_left_delimiter = "$"
+    inline_right_delimiter = "$"
+    # KaTeX 插件 copy_tex
+    copy_tex = true
+    # KaTeX 插件 mhchem
+    mhchem = true
+
   # 是否在文章页面显示原始 Markdown 文档链接
   linkToMarkdown = true
 
@@ -159,6 +169,9 @@ dateFormatToUse = "2006-01-02"
     katex_css = ''
     katex_js = ''
     katex_auto_render_js = ''
+    katex_copy_tex_css = ''
+    katex_copy_tex_js = ''
+    katex_mhchem_js = ''
     mermaid_js = ''
     echarts_js = ''
     echarts_macarons_js = ''

exampleSite/zh/content/posts/test.md

@@ -314,3 +314,9 @@ int a = 1;
 $$ c = \pm\sqrt{a^2 + b^2} $$
 
 Left \\( c = \pm\sqrt{a^2 + b^2} \\) Right
+
+Left $ c = \pm\sqrt{a^2 + b^2} $ Right
+
+$ \ce{CO2 + C -> 2 CO} $
+
+$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $

layouts/partials/scripts.html

@@ -54,7 +54,8 @@
 {{- end -}}
 
 {{- /* KaTeX https://github.com/KaTeX/KaTeX */ -}}
-{{- if .Site.Params.math | and (ne .Params.math false) -}}
+{{- if .Site.Params.math.enable | and (ne .Params.math false) -}}
+    {{- $math := .Site.Params.math -}}
     {{- $katex_css := "" -}}
     {{- if eq (getenv "HUGO_ENV") "production" | and .Site.Params.cdn.katex_css -}}
         {{- $katex_css = .Site.Params.cdn.katex_css -}}
@@ -74,10 +75,54 @@
         {{- $katex_auto_render_js = .Site.Params.cdn.katex_auto_render_js -}}
     {{- else -}}
         {{- $res := resources.Get "js/lib/katex/auto-render.min.js" -}}
-        {{- $katex_auto_render_js = printf "<script defer src=\"%s\" onload=\"renderMathInElement(document.body);\"></script>" $res.RelPermalink -}}
+        {{- $katex_auto_render_js = printf "<script defer src=\"%s\"></script>" $res.RelPermalink -}}
     {{- end -}}
     {{- $katex := delimit (slice $katex_css $katex_js $katex_auto_render_js) "" -}}
+    {{- if $math.copy_tex -}}
+        {{- $katex_copy_tex_css := "" -}}
+        {{- if eq (getenv "HUGO_ENV") "production" | and .Site.Params.cdn.katex_copy_tex_css -}}
+            {{- $katex_copy_tex_css = .Site.Params.cdn.katex_copy_tex_css -}}
+        {{- else -}}
+            {{- $res := resources.Get "css/lib/katex/copy-tex.min.css" -}}
+            {{- $katex_copy_tex_css = printf "<link rel=\"stylesheet\" href=\"%s\">" $res.RelPermalink -}}
+        {{- end -}}
+        {{- $katex_copy_tex_js := "" -}}
+        {{- if eq (getenv "HUGO_ENV") "production" | and .Site.Params.cdn.katex_copy_tex_js -}}
+            {{- $katex_copy_tex_js = .Site.Params.cdn.katex_copy_tex_js -}}
+        {{- else -}}
+            {{- $res := resources.Get "js/lib/katex/copy-tex.min.js" -}}
+            {{- $katex_copy_tex_js = printf "<script defer src=\"%s\"></script>" $res.RelPermalink -}}
+        {{- end -}}
+        {{- $katex = delimit (slice $katex $katex_copy_tex_css $katex_copy_tex_js) "" -}}
+    {{- end -}}
+    {{- if $math.mhchem -}}
+        {{- $katex_mhchem_js := "" -}}
+        {{- if eq (getenv "HUGO_ENV") "production" | and .Site.Params.cdn.katex_mhchem_js -}}
+            {{- $katex_mhchem_js = .Site.Params.cdn.katex_mhchem_js -}}
+        {{- else -}}
+            {{- $res := resources.Get "js/lib/katex/mhchem.min.js" -}}
+            {{- $katex_mhchem_js = printf "<script defer src=\"%s\"></script>" $res.RelPermalink -}}
+        {{- end -}}
+        {{- $katex = delimit (slice $katex $katex_mhchem_js) "" -}}
+    {{- end -}}
     {{- $katex | safeHTML -}}
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+            renderMathInElement(document.body, {
+                delimiters: [
+                    { left: "$$", right: "$$", display: true },
+                    { left: "\\(", right: "\\)", display: false },
+                    { left: "\\[", right: "\\]", display: true },
+                    {{- if and $math.block_left_delimiter $math.block_right_delimiter -}}
+                        { left: "{{ $math.block_left_delimiter }}", right: "{{ $math.block_right_delimiter }}", display: true },
+                    {{- end -}}
+                    {{- if and $math.inline_left_delimiter $math.inline_right_delimiter -}}
+                        { left: "{{ $math.inline_left_delimiter }}", right: "{{ $math.inline_right_delimiter }}", display: false },
+                    {{- end -}}
+                ]
+            });
+        });
+    </script>
 {{- end -}}
 
 {{- /* mermaid https://github.com/knsv/mermaid */ -}}