feat: better preview for math and mermaid

exampleSiteMultilingual/content/posts/emoji-support.md

@@ -9,7 +9,7 @@ tags = [
 +++
 
 Emoji can be enabled in a Hugo project in a number of ways.
-<!--more-->
+
 The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes).
 
 To enable emoji globally, set `enableEmoji` to `true` in your site’s [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g.

exampleSiteMultilingual/content/posts/emoji-support.zh.md

@@ -10,8 +10,6 @@ tags = [
 
 在 Hugo 博客里，你可以用多种方式使用 Emoji：
 
-<!--more-->
-
 The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes).
 
 To enable emoji globally, set `enableEmoji` to `true` in your site’s [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g.

exampleSiteMultilingual/content/posts/markdown-syntax.md

@@ -18,7 +18,10 @@ aliases = ["migrate-from-jekyl"]
 favorite = true
 +++
 
-This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
+[This article](https://www.baidu.com/) offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
+
+https://www.baidu.com
+
 
 <!--more-->
 

exampleSiteMultilingual/content/posts/math-typesetting.md

@@ -2,38 +2,15 @@
 author: Hugo Authors
 title: Math Typesetting
 date: 2019-03-08
-description: A brief guide to setup KaTeX
+description: A brief guide to setup MathJax
 math: true
 ---
 
 Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.
-<!--more-->
 
-In this example we will be using [KaTeX](https://katex.org/)
+- To enable MathJax on a page basis include the parameter `math: true` in content files.
 
-- Create a partial under `/layouts/partials/math.html`
+## Examples
-- Within this partial reference the [Auto-render Extension](https://katex.org/docs/autorender.html) or host these scripts locally.
-- Include the partial in your templates like so:
-
-```
-{{ if or .Params.math .Site.Params.math }}
-{{ partial "math.html" . }}
-{{ end }}
-```
-- To enable KaTex globally set the parameter `math` to `true` in a project's configuration
-- To enable KaTex on a per page basis include the parameter `math: true` in content files.
-
-**Note:** Use the online reference of [Supported TeX Functions](https://katex.org/docs/supported.html)
-{{< math.inline >}}
-{{ if or .Page.Params.math .Site.Params.math }}
-<!-- KaTeX -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css" integrity="sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ" crossorigin="anonymous">
-<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>
-<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
-{{ end }}
-{{</ math.inline >}}
-
-### Examples
 
 Inline math: $$ \varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887… $$
 

exampleSiteMultilingual/content/posts/placeholder-text.md

@@ -31,7 +31,7 @@ tractus malis.
 4. Arcanaque montibus omnes
 5. Quidem et
 
-# Vagus elidunt
+## Vagus elidunt
 
 <svg class="canon" xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="373" width="496"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse></g></svg>
 

layouts/_default/single.html

@@ -53,29 +53,10 @@
     */}}
 
     {{ if .Store.Get "hasMermaid" }}
-        {{ partial "resource.html" (dict "context" . "type" "js" "filename" "js/load-mermaid.js") }}
+        {{ partial "mermaid_support.html" . }}
-
-        {{ $colorTheme := "light" }}
-        {{ if and (site.Params.colortheme) (ne site.Params.colortheme "") }}
-            {{ $colorTheme = site.Params.colortheme | lower }}
     {{ end }}
 
-        <script type="module">
+    {{ if .Params.math }}
-            function detectCurrentScheme3() {
+        {{ partial "mathjax_support.html" . }}
-                    const defaultTheme = "{{ $colorTheme }}";
-                    if (localStorage !== null && localStorage.getItem("user-color-scheme")) {
-                            return localStorage.getItem("user-color-scheme");
-                    }
-                    if (defaultTheme === "dark" || defaultTheme === "light") {
-                            return defaultTheme;
-                    }
-                    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-            }
-
-            import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
-            window.mermaid = mermaid;
-            window.initMermaid()
-            document.body.dispatchEvent(new CustomEvent(detectCurrentScheme3() + "-theme-set"));
-        </script>
     {{ end }}
 {{ end }}

layouts/index.html

@@ -8,6 +8,7 @@
         {{ range (.Paginate $pages).Pages }}
             {{ partial "post-summary.html" . }}
         {{ end }}
+        
         {{ partial "pagination.html" . }}
     </div>
 

layouts/partials/mermaid_support.html

@@ -0,0 +1,24 @@
+{{ partial "resource.html" (dict "context" . "type" "js" "filename" "js/load-mermaid.js") }}
+
+{{ $colorTheme := "light" }}
+{{ if and (site.Params.colortheme) (ne site.Params.colortheme "") }}
+{{ $colorTheme = site.Params.colortheme | lower }}
+{{ end }}
+
+<script type="module">
+    function detectCurrentScheme3() {
+        const defaultTheme = "{{ $colorTheme }}";
+        if (localStorage !== null && localStorage.getItem("user-color-scheme")) {
+            return localStorage.getItem("user-color-scheme");
+        }
+        if (defaultTheme === "dark" || defaultTheme === "light") {
+            return defaultTheme;
+        }
+        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    }
+
+    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
+    window.mermaid = mermaid;
+    window.initMermaid()
+    document.body.dispatchEvent(new CustomEvent(detectCurrentScheme3() + "-theme-set"));
+</script>

layouts/partials/post-summary.html

@@ -35,5 +35,13 @@
         </div>
     {{ end }}
     
+    {{ if .Store.Get "hasMermaid" }}
+        {{ partial "mermaid_support.html" . }}
+    {{ end }}
+    
+    {{ if .Params.math }}
+        {{ partial "mathjax_support.html" . }}
+    {{ end }}
+
     {{ partial "post-info.html" . }}
 </article>