style: use primary color for borders inside katex

assets/css/markdown.css

@@ -94,7 +94,13 @@
   @apply border py-1 px-3;
 }
 
+.content .katex * {
+  @apply border-primary-text;
+}
+
 .content *:target {
   padding-top: 4rem;
   margin-top: -4rem;
 }
+
+

exampleSite/config/_default/config.toml

@@ -28,6 +28,8 @@ defaultContentLanguageInSubdir = false
     startLevel = 2
     endLevel = 6
     ordered = false
+  [markup.goldmark.renderer]
+    unsafe = true
 
 [taxonomies]
   category = "categories"

exampleSite/config/_default/params.toml

@@ -27,9 +27,9 @@ publisherLogo = ""
 
   # [math.katex]
   #   # Browse https://katex.org/docs/options.html to see the options available.
+  #   # KaTeX's Auto-render ignores `displayMode` property of the options, so this property will not work.
   #   # You can list the key and value you want as below.
-  #   displayMode = ""
-  #   output = ""
+  #   leqno = ""
 
 [comment]
   # Options: disqus and commento.

exampleSite/content/posts/math-support.md

@@ -0,0 +1,47 @@
++++
+title = "Math Support"
+description = ""
+toc = true
+authors = ["example-author"]
+tags = []
+categories = []
+series = []
+date =  "2020-11-20T22:52:56+08:00"
+lastmod = "2020-11-20T22:52:56+08:00"
+featuredImage = ""
+draft = false
++++
+
+Eureka supports the rendering of mathematical formulas by using KaTeX.
+
+<!--more-->
+
+
+You can type inline equation like $E=mc^2$.
+
+And also displayed equation like:
+
+<div>
+\[ \int u \frac{dv}{dx}\, dx=uv-\int \frac{du}{dx}v\,dx \]
+</div>
+
+
+Matrix:
+
+<div>
+\[ \begin{pmatrix} a&b\\c&d \end{pmatrix} \quad
+\begin{bmatrix} a&b\\c&d \end{bmatrix} \quad
+\begin{Bmatrix} a&b\\c&d \end{Bmatrix} \quad
+\begin{vmatrix} a&b\\c&d \end{vmatrix} \]
+</div>
+
+Aligned equation:
+
+<div>
+\[\begin{aligned}
+x ={}& a+b+c+{} \\
+&d+e+f+g
+\end{aligned}\]
+</div>
+
+And many other kinds of formulas.

layouts/partials/head.html

@@ -82,13 +82,19 @@
     {{- 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 -}}
+        renderMathInElement(document.body, {
+            delimiters: [
+                {left: "$$", right: "$$", display: true},
+                {left: "$", right: "$", display: false},
+                {left: "\\(", right: "\\)", display: false},
+                {left: "\\[", right: "\\]", display: true}
+              ],
+            {{- range $key, $value := .Site.Params.math.katex -}}
+            {{- if and (ne $value nil) (ne $value "") -}}
+            {{- $key | safeJS -}}: {{- $value | safeJS -}},
             {{- end -}}
             {{- end -}}
-        }{{- end -}});
+        });
     });
 </script>
 {{- end -}}