fix: fix mermaid error

docs/.vuepress/plugins/mermaid/helpers/darkmode.ts

@@ -0,0 +1,9 @@
+// FIXME: Should correct handle dark selector
+export const getDarkmodeStatus = (): boolean => {
+  const html = document.documentElement;
+
+  return (
+    html.classList.contains("dark") ||
+    html.getAttribute("data-theme") === "dark"
+  );
+};

docs/.vuepress/plugins/mermaid/node/mermaid.ts

@@ -0,0 +1,65 @@
+import type { PluginSimple } from "markdown-it";
+import type Renderer from "markdown-it/lib/renderer.js";
+
+const mermaidRenderer: Renderer.RenderRule = (tokens: any, index: any) =>
+  `<Mermaid id="mermaid-${index}" code="${encodeURI(
+    tokens[index].content,
+  )}"></Mermaid>`;
+
+interface MermaidOptions {
+  content: string;
+  diagram?: string;
+  title?: string;
+}
+
+export const getMermaidContent = ({
+  diagram = "mermaid",
+  content,
+  title = "",
+}: MermaidOptions): string => `\
+${title
+    ? `\
+---
+title: ${title}
+---
+
+`
+    : ""
+  }\
+${diagram === "mermaid"
+    ? ""
+    : `\
+${diagram}
+`
+  }\
+${diagram === "mermaid" || diagram === "sankey-beta"
+    ? content
+    : content
+      .split("\n")
+      .map((line) => (line ? `  ${line}` : ""))
+      .join("\n")
+  }\
+`;
+
+const getMermaid = (options: MermaidOptions, index: number): string =>
+  `<Mermaid id="mermaid-${index}" code="${encodeURI(getMermaidContent(options))}"${options.title ? ` title="${encodeURI(options.title)}"` : ""}></Mermaid>`;
+
+export const MermaidPlugin: PluginSimple = (md) => {
+  // Handle ```mermaid blocks
+  const fence = md.renderer.rules.fence;
+
+  md.renderer.rules.fence = (...args): string => {
+    const [tokens, index] = args;
+    const { content, info } = tokens[index];
+
+    const fenceInfo = info.trim();
+
+    if (fenceInfo === "mermaid") return getMermaid({ content }, index);
+
+    const [name, ...rest] = fenceInfo.split(" ");
+
+    return fence!(...args);
+  };
+
+  md.renderer.rules["mermaid"] = mermaidRenderer;
+};