feat: KaTeX support

Closes #9
wangchucheng · Nov 21, 2020 · b346260 · b346260
1 parent 1fc544b
commit b346260
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 5 deletions.
diff --git a/data/assets.toml b/data/assets.toml
@@ -11,4 +11,20 @@
 [js.fontawesome]
   version = "5.14.0"
   url = "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@%s/js/all.min.js"
-  sri = "sha256-uNYoXefWRqv+PsIF/OflNmwtKM4lStn9yrz2gVl6ymo="
+  sri = "sha256-uNYoXefWRqv+PsIF/OflNmwtKM4lStn9yrz2gVl6ymo="
+
+# Katex
+[katex]
+  version = "0.12.0"
+
+  [katex.css]
+    url = "https://cdn.jsdelivr.net/npm/katex@%s/dist/katex.min.css"
+    sri = "sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X"
+
+  [katex.js]
+    url = "https://cdn.jsdelivr.net/npm/katex@%s/dist/katex.min.js"
+    sri = "sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4"
+
+  [katex.autoRender]
+    url = "https://cdn.jsdelivr.net/npm/katex@%s/dist/contrib/auto-render.min.js"
+    sri = "sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa"
diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml
@@ -22,6 +22,15 @@ publisherLogo = ""
   imgLeft = "images/hero-left.jpg"
   imgRight = "images/hero-right.jpg"
 
+[math]
+  handler = "katex"
+
+  # [math.katex]
+  #   # Browse https://katex.org/docs/options.html to see the options available.
+  #   # You can list the key and value you want as below.
+  #   displayMode = ""
+  #   output = ""
+
 [comment]
   # Options: disqus and commento.
   platform = ""

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
@@ -42,14 +42,57 @@
 <link rel="preconnect" href="https://www.google-analytics.com" crossorigin>
 <script async src="https://www.googletagmanager.com/gtag/js?id={{ . }}"></script>
 <script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
 
-  gtag('config', '{{ . }}');
+    gtag('config', '{{ . }}');
 </script>
 {{ end }}
 
+{{ define "partials/get_bundles" }}
+{{ $currentPage := . }}
+{{ $bundles := slice $currentPage }}
+{{ if ne $currentPage $currentPage.FirstSection }}
+{{ $currentPage = $currentPage.Parent }}
+{{ $bundles = $bundles | append $currentPage }}
+{{ end }}
+{{ return $bundles.Reverse }}
+{{ end }}
+
+{{- $assets := .Site.Data.assets -}}
+{{- $enableMath := false }}
+{{- if .Site.Params.math.handler -}}
+{{- $bundles := partial "get_bundles" . -}}
+{{- $enableMath = true }}
+{{- range $bundles -}}
+{{- if and (ne .Params.math nil) (ne .Params.math "") -}}
+{{- $enableMath = .Params.math -}}
+{{- end -}}
+{{- end -}}
+{{- end -}}
+
+{{- if and (eq .Site.Params.math.handler "katex") $enableMath -}}
+<link rel="stylesheet" href="{{ printf $assets.katex.css.url $assets.katex.version }}"
+    {{- with $assets.katex.css.sri -}} integrity="{{ . }}" {{- end -}} media="print"
+    onload="this.media='all';this.onload=null" crossorigin>
+<script defer src="{{ printf $assets.katex.js.url $assets.katex.version }}" {{- with $assets.katex.js.sri -}}
+    integrity="{{ . }}" {{- end -}} crossorigin></script>
+<script defer src="{{ printf $assets.katex.autoRender.url $assets.katex.version }}"
+    {{- with $assets.katex.autoRender.sri -}} integrity="{{ . }}" {{- end -}} crossorigin></script>
+<script>
+    document.addEventListener("DOMContentLoaded", function() {
+        renderMathInElement(document.body{{- with .Site.Params.math.katex -}}, {
+            {{- range $key, $value := . -}}
+            {{- if $value -}}
+            {{- $key | safeJS -}}: {{- $value | safeJS -}}
+            {{- end -}}
+            {{- end -}}
+        }{{- end -}});
+    });
+</script>
+{{- end -}}
+
 {{ with .Site.Params.icon }}
 <link rel="icon" type="image/png" sizes="32x32" href="{{ (partial "get_icon" (dict "icon" . "size" 32)).Permalink }}">
 <link rel="apple-touch-icon" sizes="180x180" href="{{ (partial "get_icon" (dict "icon" . "size" 180)).Permalink }}">