refactor mermaid to use code highlight and support chinese

Author: madawei2699

content/dev/glimpse-of-web3/index.zh-cn.md

@@ -10,6 +10,7 @@ og_image: "https://img.bmpi.dev/6ab55cab-ceaf-3657-77db-4e1660924ca4.png"
 categories: [
     "什么是X"
 ]
+isMermaidEnabled: true
 ---
 
 <div class="heti heti--ancient heti--vertical" style="margin: auto;">
@@ -98,13 +99,13 @@ Mirror 的数据都存在在 [Arweave](https://www.arweave.org/) 之上，Arweav
 
 但 Web3 会不会从去中心化逐渐发展为中心化呢？考虑到比特币的绝大部分算力目前都掌握在少数几个矿池公司手中，再精妙的算法也抵挡不了人性对利益的追求，用户为了方便连隐私都可以不要，更不会为了一个去中心化的技术问题而放弃中心化的便利，Web3 这条去中心化之路注定漫长而难走。
 
-{{<mermaid align="center">}}
-graph LR;
+```mermaid
+graph LR
     Web1 --> Web2
     Web2 -->|Blockchain?| D[Web3]
     Web2 -->|AI?| E[Web3]
     Web2 -->|Other?| F[Web3]
-{{< /mermaid >}}
+```
 
 本文参考的文章有：
 

layouts/shortcodes/mermaid.html

@@ -525,4 +525,11 @@ li .fa-jk {
     border: 1px dashed #ccc;
     font-size: .3em;
     font-family: 'LXGW WenKai';
+}
+
+.mermaid {
+    width: 100%;
+    height: auto;
+    text-align: center;
+    border: 1px dashed #ccc;
 }

static/css/main.css

@@ -189,19 +189,12 @@
   <script src="//unpkg.com/heti/umd/heti-addon.min.js"></script>
   <script>
     // init heti: https://github.com/sivan/heti
-    const heti = new Heti('.heti');
+    const heti = new Heti('.heti p, li, a, h1, h2, h3, h4, h5, h6, .title');
     heti.autoSpacing(); // 自动进行中西文混排美化和标点挤压
     // init AOS: https://github.com/michalsnik/aos
     AOS.init({
       disable: 'mobile'
     });
-    // add mermaid: https://github.com/mermaid-js/mermaid
-    var mermaid = document.getElementsByClassName('mermaid');
-    if (mermaid.length > 0) {
-      var tag = document.createElement('script');
-      tag.src = 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js';
-      document.getElementsByTagName('body')[0].appendChild(tag);
-    }
     // add markup: https://github.com/gera2ld/markmap
     let markups = document.querySelectorAll('code[data-lang=markmap]');
     Array.prototype.forEach.call(markups, function(e) {
@@ -212,6 +205,24 @@
       e.parentElement.replaceWith(markupDiv);
     });
   </script>
+  {{ if .Params.isMermaidEnabled }}
+  <script src="https://cdn.jsdelivr.net/npm/mermaid@8.14.0/dist/mermaid.min.js"></script>
+  <script>
+    // add mermaid: https://github.com/mermaid-js/mermaid
+    let mermaidBlocks = document.querySelectorAll('code[data-lang=mermaid]');
+    Array.prototype.forEach.call(mermaidBlocks, function(e) {
+      let text = e.textContent;
+      let mermaidDiv = document.createElement('div');
+      mermaidDiv.className = 'mermaid';
+      mermaidDiv.textContent = text;
+      e.parentElement.replaceWith(mermaidDiv);
+    });
+    window.mermaid.mermaidAPI.initialize(
+    window.mermaidOptions
+      ? window.mermaidOptions
+      : { securityLevel: "loose", theme: "base" });
+  </script>
+  {{ end }}
   {{ end }}
 
 </body>

themes/hugo-coder/layouts/_default/baseof.html

@@ -1,4 +1,4 @@
-<li>
+<li class="heti" style="max-width: fit-content;">
   <span class="date">{{ .Date.Format (.Site.Params.dateFormat | default "January 2, 2006" ) }}</span>
   <a class="title" href="{{ .Params.ExternalLink | default .RelPermalink }}">{{ .Title }}</a>
 </li>

themes/hugo-coder/layouts/dev/li.html

@@ -5,7 +5,7 @@
   <section class="container post">
     <article>
       <header>
-        <div class="post-title">
+        <div class="post-title heti">
           <h1 class="title">{{ .Title }}</h1>
         </div>
         <div class="post-meta">

themes/hugo-coder/layouts/dev/single.html

@@ -1,4 +1,4 @@
-<li>
+<li class="heti" style="max-width: fit-content;">
   <span class="date">{{ .Date.Format (.Site.Params.dateFormat | default "January 2, 2006" ) }}</span>
   <a class="title" href="{{ .Params.ExternalLink | default .RelPermalink }}">{{ .Title }}</a>
 </li>

themes/hugo-coder/layouts/money/li.html

@@ -5,7 +5,7 @@
   <section class="container post">
     <article>
       <header>
-        <div class="post-title">
+        <div class="post-title heti">
           <h1 class="title">{{ .Title }}</h1>
         </div>
         <div class="post-meta">

themes/hugo-coder/layouts/money/single.html

@@ -1,4 +1,4 @@
-<li>
+<li class="heti" style="max-width: fit-content;">
   <span class="date">{{ .Date.Format (.Site.Params.dateFormat | default "January 2, 2006" ) }}</span>
   <a class="title" href="{{ .Params.ExternalLink | default .RelPermalink }}">{{ .Title }}</a>
 </li>

themes/hugo-coder/layouts/self/li.html

@@ -5,7 +5,7 @@
   <section class="container post">
     <article>
       <header>
-        <div class="post-title">
+        <div class="post-title heti">
           <h1 class="title">{{ .Title }}</h1>
         </div>
         <div class="post-meta">