feat(plugin-mermaid): support custom code block token #46

docs/docs/plugins/mermaid.md

@@ -40,24 +40,13 @@ module.exports = {
 
 ## Options
 
-You can use the following options to set theme for Mermaid diagrams, for example:
+### token
 
-```js
-module.exports = {
-  plugins: [
-    [
-      "@renovamen/vuepress-plugin-mermaid", {
-        theme: "default",  // default: "default"
-        darkTheme: "dark",  // default: "dark"
-        darkSelector: "html",  // default: undefined
-        darkClass: "dark"  // default: undefined
-      }
-    ]
-  ]
-}
-```
+- Type: `string`
+
+- Default: `"mermaidjs"`
 
-[Here](https://github.com/mermaid-js/mermaid/tree/develop/src/themes) are all themes supported by Mermaid.
+- Details: Custom token of the fenced code block.
 
 
 ### theme
@@ -66,7 +55,7 @@ module.exports = {
 
 - Default: `"default"`
 
-- Details: Theme
+- Details: Theme ([here](https://github.com/mermaid-js/mermaid/tree/develop/src/themes) are all themes supported by Mermaid)
 
 
 ### darkTheme
@@ -111,7 +100,7 @@ Click the mode switcher in the lower right corner to see what happens!
 
 ## Usage
 
-The token info of the code block should be `mermaidjs`, for example:
+The token info of the code block should be `mermaidjs` (or `options.token` if you set), for example:
 
 ```mermaidjs
 sequenceDiagram

docs/zh/docs/plugins/mermaid.md

@@ -41,24 +41,13 @@ module.exports = {
 
 ## 配置项
 
-可以使用以下配置项来设置 Mermaid 的主题，比如：
+### token
 
-```js
-module.exports = {
-  plugins: [
-    [
-      "@renovamen/vuepress-plugin-mermaid", {
-        theme: "default",  // 默认："default"
-        darkTheme: "dark",  // 默认："dark"
-        darkSelector: "html",  // 默认：undefined
-        darkClass: "dark"  // 默认：undefined
-      }
-    ]
-  ]
-}
-```
+- 类型：`string`
+
+- 默认值：`"mermaidjs"`
 
-[这里](https://github.com/mermaid-js/mermaid/tree/develop/src/themes)是所有 Mermaid 支持的主题。
+- 详情：自定义代码块的 token
 
 
 ### theme
@@ -67,7 +56,7 @@ module.exports = {
 
 - 默认值：`"default"`
 
-- 详情：主题
+- 详情：主题（[这里](https://github.com/mermaid-js/mermaid/tree/develop/src/themes)是所有 Mermaid 支持的主题）
 
 
 ### darkTheme
@@ -112,7 +101,7 @@ module.exports = {
 
 ## 使用
 
-代码块的 token info 需要为 `mermaidjs`，例子：
+代码块的 token info 需要为 `mermaidjs`（如果你使用了自定义代码块 token，则需要为 `options.token`），例子：
 
 ```mermaidjs
 sequenceDiagram

packages/plugins/mermaid/src/node/index.ts

@@ -2,7 +2,7 @@ import type { Plugin } from "@vuepress/core";
 import { path } from "@vuepress/utils";
 import type MarkdownIt from "markdown-it";
 import type { MermaidOptions } from "../shared";
-import { mermaid } from "./markdown-it-mermaid";
+import { getMermaid } from "./markdown-it-mermaid";
 
 const mermaidPlugin: Plugin<MermaidOptions> = (
   options: MermaidOptions,
@@ -21,7 +21,7 @@ const mermaidPlugin: Plugin<MermaidOptions> = (
     ),
 
     extendsMarkdown: (md: MarkdownIt): void => {
-      md.use(mermaid);
+      md.use(getMermaid(options.token));
     }
   };
 };

packages/plugins/mermaid/src/node/markdown-it-mermaid.ts

@@ -3,20 +3,23 @@ import { hash } from "@vuepress/utils";
 import type MarkdownIt from "markdown-it";
 import type Token from "markdown-it/lib/token";
 
-export const mermaid = (md: MarkdownIt): void => {
-  const temp = md.renderer.rules.fence!.bind(md.renderer.rules);
-  md.renderer.rules.fence = (tokens: Token[], index, options, env, slf) => {
-    const token = tokens[index];
+export const getMermaid = (blockToken = "mermaidjs") => {
+  const mermaid = (md: MarkdownIt): void => {
+    const temp = md.renderer.rules.fence!.bind(md.renderer.rules);
+    md.renderer.rules.fence = (tokens: Token[], index, options, env, slf) => {
+      const token = tokens[index];
 
-    if (token.info.trim() === "mermaidjs") {
-      try {
-        const key = `mermaid_${hash(index)}`;
-        const content = htmlEscape(token.content.trim());
-        return `<Mermaid id="${key}" data-code="${content}"></Mermaid>`;
-      } catch (err) {
-        return `<pre>${err}</pre>`;
+      if (token.info.trim() === blockToken) {
+        try {
+          const key = `mermaid_${hash(index)}`;
+          const content = htmlEscape(token.content.trim());
+          return `<Mermaid id="${key}" data-code="${content}"></Mermaid>`;
+        } catch (err) {
+          return `<pre>${err}</pre>`;
+        }
       }
-    }
-    return temp!(tokens, index, options, env, slf);
+      return temp!(tokens, index, options, env, slf);
+    };
   };
+  return mermaid;
 };

packages/plugins/mermaid/src/shared/options.ts

@@ -1,4 +1,11 @@
 export interface MermaidOptions {
+  /**
+   * Custom fenced code block token.
+   *
+   * @default "mermaidjs"
+   */
+  token?: string;
+
   /**
    * Theme of Mermaid diagrams.
    *