feat: support mermaid

feat: codeblock highlight

feat: dark mode for highlight

feat: copy button for code block

feat: support katex math rendering

layouts/_default/_markup/render-codeblock-mermaid.html

@@ -0,0 +1,4 @@
+<pre class="mermaid mt-6">
+  {{- .Inner | safeHTML }}
+</pre>
+{{ .Page.Store.Set "hasMermaid" true }}

layouts/_default/_markup/render-codeblock.html

@@ -0,0 +1,23 @@
+{{ $class := .Attributes.class | default "" }}
+{{ $filename := .Attributes.filename | default "" }}
+{{ $lang := .Attributes.lang | default .Type }}
+
+
+<div class="code-block relative mt-6 first:mt-0 group/code">
+  {{- if $filename -}}
+    <div class="filename">{{ $filename }}</div>
+  {{- end -}}
+  {{- if transform.CanHighlight $lang -}}
+    <div id="code-block-{{ .Ordinal }}">
+      {{- highlight .Inner $lang .Options -}}
+    </div>
+  {{- else -}}
+    <pre><code id="code-block-{{ .Ordinal }}">{{- .Inner -}}</code></pre>
+  {{- end -}}
+  <div class="opacity-0 transition group-hover/code:opacity-100 flex gap-1 absolute m-[11px] right-0 {{ if $filename }}top-8{{ else }}top-0{{ end }}">
+    <button class="code-copy-btn group/copybtn transition-all active:opacity-50 bg-primary-700/5 border border-black/5 text-gray-600 hover:text-gray-900 rounded-md p-1.5 dark:bg-primary-300/10 dark:border-white/10 dark:text-gray-400 dark:hover:text-gray-50" title="Copy code" data-clipboard-target="#code-block-{{ .Ordinal }}">
+      {{ partial "utils/icon.html" (dict "context" page "name" "copy" "attributes" "class=\"group-[.copied]/copybtn:hidden pointer-events-none h-4 w-4\"") }}
+      {{ partial "utils/icon.html" (dict "context" page "name" "check" "attributes" "class=\"hidden group-[.copied]/copybtn:block success-icon pointer-events-none h-4 w-4\"") }}
+    </button>
+  </div>
+</div>

layouts/partials/scripts.html

@@ -1,2 +1,34 @@
 {{ $themeJS := resources.Get "js/theme.js" }}
 <script src="{{ $themeJS.RelPermalink }}"></script>
+
+{{ $codeCopyJS := resources.Get "js/code-copy.js" }}
+<script src="{{ $codeCopyJS.RelPermalink }}"></script>
+
+{{ if .Page.Store.Get "hasMermaid" }}
+  <script type="module">
+    // TODO: embed mermaid.min.js in the theme
+    import mermaid from "https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs";
+    const theme = document.documentElement.classList.contains("dark") ? "dark" : "default";
+    mermaid.initialize({ startOnLoad: true, theme: theme });
+  </script>
+{{ end }}
+
+{{ if .Page.Params.math }}
+  <!-- TODO: embed katex in the theme -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css" integrity="sha384-GvrOXuhMATgEsSwCs4smul74iXGOixntILdUW9XmUC6+HX0sLNAK3q71HotJqlAn" crossorigin="anonymous" />
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js" integrity="sha384-cpW21h6RZv/phavutF+AuVYrr+dA8xD9zs6FwLpaCct6O9ctzYFfFr4dgmgccOTx" crossorigin="anonymous"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script>
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      renderMathInElement(document.body, {
+        delimiters: [
+          { left: "$$", right: "$$", display: true },
+          { left: "$", right: "$", display: false },
+          { left: "\\(", right: "\\)", display: false },
+          { left: "\\[", right: "\\]", display: true },
+        ],
+        throwOnError: false,
+      });
+    });
+  </script>
+{{ end }}