feat: support mermaid #64

components/MarkdownIt/index.tsx

@@ -14,6 +14,7 @@ const MarkdownItToc = require('markdown-it-task-lists');
 const MarkdownItAbbr = require('markdown-it-abbr');
 const MarkdownItFootnote = require('markdown-it-footnote');
 const MarkdownItContainer = require('markdown-it-container');
+import MarkdownItMermaid from './plugins/mermaid';
 import config from '~config';
 import { capitalize } from '~lib/captalize';
 
@@ -77,6 +78,7 @@ const md: MarkdownIt = new MarkdownIt(options)
   .use(MarkdownItAbbr)
   .use(MarkdownItFootnote)
   .use(MarkdownItContainer, 'spoiler')
+  .use(MarkdownItMermaid)
   .use(MarkdownItAnchor, {
     level: 2,
     slugify: (string: string) => string,

components/MarkdownIt/plugins/mermaid.ts

@@ -0,0 +1,71 @@
+// @ts-nocheck
+import mermaid from 'mermaid';
+import config from '~config';
+
+import type MarkdownIt from 'markdown-it';
+
+const MarkdownItMermaid = (md: MarkdownIt) => {
+  const defaultFenceRender = md.renderer.rules.fence;
+
+  const customMermaidFenceRender = (tokens, idx, options = {}, env, slf) => {
+    const token = tokens[idx];
+    const code = token.content.trim();
+    let [type, theme] = token.info.split(' ');
+    const firstLine = code.split(/\n/)[0].trim();
+    if (
+      firstLine === 'gantt' ||
+      firstLine === 'sequenceDiagram' ||
+      firstLine.match(/^graph(?: (TB|BT|RL|LR|TD))?(;)?$/)
+    ) {
+      type = 'mermaid';
+    }
+
+    if (type.trim() !== 'mermaid') {
+      return defaultFenceRender(tokens, idx, (options = {}), env, slf);
+    } else if (type.trim() === 'mermaid') {
+      try {
+        const mermaid_config = {
+          securityLevel: 'loose',
+          theme: theme || 'default', //  "default" | "forest" | "dark" | "neutral"
+          startOnLoad: false, // 会自动寻找 mermaid class
+          htmlLabels: true
+        };
+        mermaid.initialize(mermaid_config);
+        mermaid.parse(code);
+        const id = 'mermaid_' + idx;
+
+        let imageHTML = '';
+        let imageAttrs = [];
+        mermaid.render(id, code, (html) => {
+          let svg = this.document.getElementById(id);
+          if (svg) {
+            imageAttrs.push([
+              'style',
+              `max-width:${svg.style.maxWidth};max-height:${svg.style.maxHeight}`
+            ]);
+          }
+          imageHTML = html;
+        });
+
+        switch (config.rendertype) {
+          case 'svg':
+            return `<div>${imageHTML}</div>`;
+          case 'png':
+            imageAttrs.push([
+              'src',
+              `data:image/svg+xml,${encodeURIComponent(imageHTML)}`
+            ]);
+            return `<img ${slf.renderAttrs({ attrs: imageAttrs })}>`;
+          default:
+            return `<div>${imageHTML}</div>`;
+        }
+      } catch (e) {
+        return `<pre>${code}</pre>`;
+      }
+    }
+  };
+
+  md.renderer.rules.fence = customMermaidFenceRender;
+};
+
+export { MarkdownItMermaid as default };

config/index.tsx

@@ -5,6 +5,7 @@ import { FaRegDotCircle } from 'react-icons/fa';
 const testFile = 'http://localhost:3000/tiddlers.json';
 
 const config = {
+  rendertype: 'svg',
   emptyTip: '这里空空如也 !',
   steps: 10 as const,
   title: 'Blog with NextJs',

content/debounce-throttle.md

@@ -1,3 +1,8 @@
+---
+title: debounce-throttle
+date: 2024/1/25 15:33:10
+---
+
 :::tip
 防抖节流都是利用 setTimeout 和闭包 来实现的。
 :::
@@ -58,4 +63,4 @@ function throttle(fn: Function, delay: number) {
 		}
 		}
 	}
-```
+```

content/闭包漏洞.md

@@ -9,6 +9,11 @@ date: 2024/1/17 21:24:29
 不直接修改 o, 修改 obj 对象, 这是一个 IFEE 的闭包函数, 一般使用闭包都是为了不暴露内部的变量. 但是要注意一些特殊的漏洞处理.
 :::
 
+```mermaid
+graph
+a --> b
+```
+
 ```js
 const o = (function () {
   const obj ={

package.json

@@ -40,6 +40,7 @@
     "markdown-it-table-of-contents": "^0.6.0",
     "markdown-it-task-lists": "^2.1.1",
     "md5": "^2.3.0",
+    "mermaid": "v9.3.0",
     "next": "14.1.0",
     "next-mdx-remote": "^4.4.1",
     "nextjs-toploader": "^1.6.4",