feat: katex support

src/css/default.css

@@ -36,7 +36,7 @@
     @apply text-xl font-bold mt-4;
   }
   p {
-    @apply text-lg leading-loose my-2;
+    @apply leading-loose my-2;
   }
   img {
     @apply mx-auto my-4 rounded-lg;
@@ -44,4 +44,7 @@
   div.sourceCode {
     @apply p-4 rounded-lg;
   }
+  .math.display {
+    @apply overflow-x-auto;
+  }
 }

src/js/main.js

@@ -2,6 +2,19 @@ import "../css/default.css"
 
 // @ts-check
 
+document.addEventListener("DOMContentLoaded", () => {
+  var mathElements = document.querySelectorAll(".math.inline, .math.display")
+  mathElements.forEach(function (element) {
+    var tex = element.textContent
+    var displayMode = element.classList.contains("display")
+    var renderedMath = katex.renderToString(tex, {
+      displayMode: displayMode,
+      throwOnError: false,
+    })
+    element.innerHTML = renderedMath
+  })
+})
+
 const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
 const themeSystem = () => {
   if (prefersDark) {

src/out/bundle.js

@@ -1 +1 @@
-const e=window.matchMedia("(prefers-color-scheme: dark)").matches,t=()=>{document.documentElement.classList.remove("dark")},m=()=>{document.documentElement.classList.add("dark")};let a="dark"===localStorage.getItem("theme")?2:"light"===localStorage.getItem("theme")?1:0;const c=document.getElementById("theme-toggle");c.addEventListener("click",(()=>{switch(a=(a+1)%3,a){case 0:localStorage.removeItem("theme"),e?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark"),c.innerText="theme: system";break;case 1:e?(localStorage.setItem("theme","light"),t(),c.innerText="theme: light"):(localStorage.setItem("theme","dark"),m(),c.innerText="theme: dark");break;case 2:e?(localStorage.setItem("theme","dark"),m(),c.innerText="theme: dark"):(localStorage.setItem("theme","light"),t(),c.innerText="theme: light")}}));
+document.addEventListener("DOMContentLoaded",(()=>{document.querySelectorAll(".math.inline, .math.display").forEach((function(e){var t=e.textContent,a=e.classList.contains("display"),n=katex.renderToString(t,{displayMode:a,throwOnError:!1});e.innerHTML=n}))}));const e=window.matchMedia("(prefers-color-scheme: dark)").matches,t=()=>{document.documentElement.classList.remove("dark")},a=()=>{document.documentElement.classList.add("dark")};let n="dark"===localStorage.getItem("theme")?2:"light"===localStorage.getItem("theme")?1:0;const m=document.getElementById("theme-toggle");m.addEventListener("click",(()=>{switch(n=(n+1)%3,n){case 0:localStorage.removeItem("theme"),e?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark"),m.innerText="theme: system";break;case 1:e?(localStorage.setItem("theme","light"),t(),m.innerText="theme: light"):(localStorage.setItem("theme","dark"),a(),m.innerText="theme: dark");break;case 2:e?(localStorage.setItem("theme","dark"),a(),m.innerText="theme: dark"):(localStorage.setItem("theme","light"),t(),m.innerText="theme: light")}}));

src/posts/2020-09-22-ni-hao.md

@@ -30,4 +30,8 @@ toSlug =
 
 We can also try some math. Here is a simple theorem:
 
-Seems like it doesnt quite work yet.
+$$
+a^2 + b^2 \ne c^2 \, \forall\,\left\{ a,\,b,\,c \right\} \in \mathbb{Z} \land a,\,b,\,c \ge 3
+$$
+
+Seems like it doesn't quite work yet.

src/templates/default.html

@@ -48,9 +48,20 @@
       title="$feedTitle$"
       type="application/rss+xml"
     />
-
+    <script
+      defer
+      src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js"
+      integrity="sha384-hIoBPJpTUs74ddyc4bFZSM1TVlQDA60VBbJS0oA934VSz82sBx1X7kSx2ATBDIyd"
+      crossorigin="anonymous"
+    ></script>
     <link rel="stylesheet" href="./out/bundle.css" />
     <link rel="stylesheet" href="./css/code.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css"
+      integrity="sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww"
+      crossorigin="anonymous"
+    />
 
     <script>
       if (

ssg/src/Main.hs

@@ -8,7 +8,7 @@ import qualified Data.Text.Slugger as Slugger
 import Hakyll
 import System.FilePath (takeFileName)
 import Text.Pandoc (
-    Extension (Ext_fenced_code_attributes, Ext_footnotes, Ext_gfm_auto_identifiers, Ext_implicit_header_references, Ext_smart),
+    Extension (Ext_fenced_code_attributes, Ext_footnotes, Ext_gfm_auto_identifiers, Ext_implicit_header_references, Ext_smart, Ext_tex_math_dollars),
     Extensions,
     ReaderOptions,
     WriterOptions (writerHighlightStyle),
@@ -18,6 +18,11 @@ import Text.Pandoc (
     writerExtensions,
  )
 import Text.Pandoc.Highlighting (Style, breezeDark, styleToCss)
+import Text.Pandoc.Options (
+    HTMLMathMethod (..),
+    WriterOptions (..),
+    defaultKaTeXURL,
+ )
 
 --------------------------------------------------------------------------------
 -- PERSONALIZATION
@@ -200,6 +205,7 @@ pandocExtensionsCustom =
     githubMarkdownExtensions
         <> extensionsFromList
             [ Ext_fenced_code_attributes
+            , Ext_tex_math_dollars
             , Ext_gfm_auto_identifiers
             , Ext_implicit_header_references
             , Ext_smart
@@ -217,6 +223,7 @@ pandocWriterOpts =
     defaultHakyllWriterOptions
         { writerExtensions = pandocExtensionsCustom
         , writerHighlightStyle = Just pandocHighlightStyle
+        , writerHTMLMathMethod = KaTeX defaultKaTeXURL
         }
 
 pandocHighlightStyle :: Style