chore: Fix vitepress build

2025-11-15 02:04:08 +01:00 · 2022-10-28 23:33:57 +05:30
parent b7d24c8325
commit 13e5c5ba72
19 changed files with 463 additions and 534 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -33,5 +33,4 @@ cypress/snapshots/
 .tsbuildinfo
 tsconfig.tsbuildinfo
-#docs generate from code
+packages/mermaid/src/vitepress
 packages/mermaid/src/docs/config/setup
--- a/cSpell.json
+++ b/cSpell.json
@@ -13,6 +13,7 @@
    "Mindmaps",
    "mitigations",
    "sandboxed",
    "shiki",
    "Sveidqvist",
    "verdana",
    "Visio"
--- a/docs/.vitepress/blocks-markdown.ts
+++ b/docs/.vitepress/blocks-markdown.ts
@@ -1,25 +0,0 @@
 const CustomMarkdown = (md) => {
  const fence = md.renderer.rules.fence.bind(md.renderer.rules);
  md.renderer.rules.fence = (tokens, index, options, env, slf) => {
    const token = tokens[index];
    if (token.info.trim() === 'warning') {
      return `<div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>${token.content}}</p></div>`;
    }
    if (token.info.trim() === 'note') {
      return `<div class="tip custom-block"><p class="custom-block-title">NOTE</p><p>${token.content}}</p></div>`;
    }
    if (token.info.trim() === 'jison') {
      return `<div class="language-"><button class="copy"></button><span class="lang">jison</span><pre><code>${token.content
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')}}</code></pre></div>`;
    }
    return fence(tokens, index, options, env, slf);
  };
 };
 export default CustomMarkdown;
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -1,176 +0,0 @@
 import { version } from '../../../package.json';
 import MermaidExample from './mermaid-markdown-all';
 import { MermaidMarkdown } from 'vitepress-plugin-mermaid';
 import CustomMarkdown from './blocks-markdown';
 import { defineConfig } from 'vitepress';
 const allMarkdownTransformers = {
  config: async (md) => {
    MermaidMarkdown(md);
    await MermaidExample(md);
    CustomMarkdown(md);
  },
 };
 export default defineConfig({
  lang: 'en-US',
  title: 'Mermaid',
  description: 'Create diagrams and visualizations using text and code.',
  base: '/mermaid-js/',
  markdown: allMarkdownTransformers,
  head: [['link', { rel: 'icon', type: 'image/x-icon', href: '/mermaid-js/favicon.ico' }]],
  themeConfig: {
    nav: nav(),
    editLink: {
      pattern: 'https://github.com/mermaid-js/mermaid/edit/develop/packages/mermaid/src/docs/:path',
      text: 'Edit this page on GitHub',
    },
    sidebar: {
      '/': sidebarAll(),
      // "/intro/": sidebarIntro(),
      // "/syntax/": sidebarSyntax(),
      // "/config": sidebarConfig(),
      // "/misc/": sidebarMisc(),
      // "/community/": sidebarCommunity(),
    },
  },
 });
 function nav() {
  return [
    { text: 'Intro', link: '/intro/', activeMatch: '/intro/' },
    {
      text: 'Configuration',
      link: '/config/Tutorials',
      activeMatch: '/config/',
    },
    { text: 'Syntax', link: '/syntax/classDiagram', activeMatch: '/syntax/' },
    { text: 'Misc', link: '/misc/integrations', activeMatch: '/misc/' },
    {
      text: 'Community',
      link: '/community/n00b-overview',
      activeMatch: '/community/',
    },
    {
      text: version,
      items: [
        {
          text: 'Changelog',
          link: 'https://github.com/mermaid-js/mermaid/blob/develop/CHANGELOG.md',
        },
        {
          text: 'Contributing',
          link: 'https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md',
        },
      ],
    },
    {
      text: '💻 Live Editor',
      link: 'https://mermaid.live',
    },
  ];
 }
 function sidebarAll() {
  return [
    {
      text: '📔 Introduction',
      collapsible: true,
      items: [
        { text: 'About Mermaid', link: '/intro/' },
        { text: 'Deployment', link: '/intro/n00b-gettingStarted' },
        {
          text: 'Syntax and Configuration',
          link: '/intro/n00b-syntaxReference',
        },
      ],
    },
    ...sidebarSyntax(),
    ...sidebarConfig(),
    ...sidebarMisc(),
    ...sidebarCommunity(),
    // {
    //   text: "Generated",
    //   items: [{ text: "modules", link: "docs/code/modules" }],
    // },
  ];
 }
 function sidebarSyntax() {
  return [
    {
      text: '📊 Diagram Syntax',
      collapsible: true,
      items: [
        { text: 'Flowchart', link: '/syntax/flowchart' },
        { text: 'Sequence Diagram', link: '/syntax/sequenceDiagram' },
        { text: 'Class Diagram', link: '/syntax/classDiagram' },
        { text: 'State Diagram', link: '/syntax/stateDiagram' },
        {
          text: 'Entity Relationship Diagram',
          link: '/syntax/entityRelationshipDiagram',
        },
        { text: 'User Journey', link: '/syntax/userJourney' },
        { text: 'Gantt', link: '/syntax/gantt' },
        { text: 'Pie Chart', link: '/syntax/pie' },
        { text: 'Requirement Diagram', link: '/syntax/requirementDiagram' },
        { text: 'Gitgraph (Git) Diagram 🔥', link: '/syntax/gitGraph' },
        { text: 'C4C Diagram (Context) Diagram 🦺⚠️', link: '/syntax/c4c' },
        { text: 'Other Examples', link: '/syntax/examples' },
      ],
    },
  ];
 }
 function sidebarConfig() {
  return [
    {
      text: '⚙️ Deployment and Configuration',
      collapsible: true,
      items: [
        { text: 'Tutorials', link: '/config/Tutorials' },
        { text: 'API-Usage', link: '/config/usage' },
        { text: 'Mermaid API Configuration', link: '/config/setup/modules' },
        { text: 'Directives', link: '/config/directives' },
        { text: 'Theming', link: '/config/theming' },
        { text: 'Accessibility', link: '/config/accessibility' },
        { text: 'Mermaid CLI', link: '/config/mermaidCLI' },
        { text: 'Advanced usage', link: '/config/n00b-advanced' },
        { text: 'Configuration', link: '/config/configuration' },
      ],
    },
  ];
 }
 function sidebarMisc() {
  return [
    {
      text: '📚 Misc',
      collapsible: true,
      items: [
        { text: 'Use-Cases and Integrations', link: '/misc/integrations' },
        { text: 'FAQ', link: '/misc/faq' },
      ],
    },
  ];
 }
 function sidebarCommunity() {
  return [
    {
      text: '🙌 Contributions and Community',
      collapsible: true,
      items: [
        { text: 'Overview for Beginners', link: '/community/n00b-overview' },
        {
          text: 'Development and Contribution',
          link: '/community/development',
        },
        { text: 'Changelog', link: '/community/CHANGELOG' },
        { text: 'Adding Diagrams', link: '/community/newDiagram' },
        { text: 'Security', link: '/community/security' },
      ],
    },
  ];
 }
--- a/docs/.vitepress/mermaid-markdown-all.ts
+++ b/docs/.vitepress/mermaid-markdown-all.ts
@@ -1,33 +0,0 @@
 import shiki from 'shiki';
 const MermaidExample = async (md) => {
  const fence = md.renderer.rules.fence.bind(md.renderer.rules);
  const highlighter = await shiki.getHighlighter({ theme: 'material-palenight' });
  md.renderer.rules.fence = (tokens, index, options, env, slf) => {
    const token = tokens[index];
    // console.log("==>",token.info);
    if (token.info.trim() === 'mermaid-example') {
      let code = highlighter.codeToHtml(token.content, { lang: 'mermaid' });
      code = code.replace('#2e3440ff', 'transparent');
      code = code.replace('#292D3E', 'transparent');
      code =
        '<h5>Code:</h5>' +
        `<div class="language-mermaid">` +
        `<button class="copy"></button><span class="lang">mermaid</span>` +
        code +
        '</div>';
      // return code;
      return `${code}
          <h5>Render:</h5>
          <Mermaid id="me${index}"  graph="${encodeURIComponent(token.content)}"></Mermaid>`;
    }
    return fence(tokens, index, options, env, slf);
  };
 };
 export default MermaidExample;
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -1,27 +0,0 @@
 :root {
  --vp-c-brand: #ff3670;
  --vp-c-brand-light: #ff5e8c;
  --vp-c-brand-lighter: #ff85a8;
  --vp-c-brand-lightest: #ff9bb7;
  --vp-c-brand-dark: #bd34fe;
  --vp-c-brand-darker: #9339bd;
  --vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
 }
 :root {
  --vp-home-hero-name-color: transparent;
  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #ff3670);
  --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #ff3670 50%);
  --vp-home-hero-image-filter: blur(72px);
 }
 .vp-doc > div {
  width: 100%;
 }
 a.edit {
  margin: 12px;
  position: relative;
  top: 10px;
 }
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,12 +0,0 @@
 import DefaultTheme from 'vitepress/theme';
 // @ts-ignore
 import Mermaid from 'vitepress-plugin-mermaid/Mermaid.vue';
 import './custom.css';
 export default {
  ...DefaultTheme,
  enhanceApp({ app }) {
    // register global components
    app.component('Mermaid', Mermaid);
  },
 };
--- a/docs/config/setup/.nojekyll
+++ b/docs/config/setup/.nojekyll
@@ -1 +0,0 @@
 TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,140 +0,0 @@
 > **Warning**
 >
 > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
 >
 > ## Please edit the corresponding file in package/mermaid/src/docs.
 ---
 layout: home
 title: Mermaid
 titleTemplate: Diagramming and charting tool
 hero:
 name: Mermaid
 text: Diagramming and charting tool
 tagline: JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
 image:
 src: /mermaid-logo.svg
 alt: Mermaid
 actions:
 \- theme: brand
 text: Get Started
 link: /intro/
 \- theme: alt
 text: View on GitHub
 link: https://github.com/mermaid-js/mermaid
 features:
 - title: ➕ Easy to use!
  details: Mermaid allows even non-programmers to easily create detailed and diagrams through the Mermaid Live Editor.
 - title: 🎥 Video Tutorials!
  details: Has video tutorials for beginners and advanced users.
 - title: 🏆 Award winner!
  details: Mermaid was nominated and won the JS Open Source Awards (2019) in the category "The most exciting use of technology"!!!
 - title: 🧩 Integrations available!
  details: Use Mermaid with your favorite applications, check out the list of Integrations and Usages of Mermaid.
 ---
 <script setup>
 import { VPTeamMembers } from 'vitepress/theme'
 const members = [
  {
    avatar: 'https://avatars.githubusercontent.com/u/5837277?v=4',
    name: 'Knut Sveidqvist',
    title: 'Creator',
    links: [
      { icon: 'github', link: 'https://github.com/knsv' },
    ]
  },
   {
    avatar: 'https://avatars.githubusercontent.com/u/1912783?v=4',
    name: 'Marc Faber',
    title: 'Developer',
    links: [
      { icon: 'github', link: 'https://gdfaber.github.io/' },
      { icon: 'linkedin', link: 'https://www.linkedin.com/in/marc-faber/' },      
    ]
  }, {
    avatar: 'https://avatars.githubusercontent.com/u/1564825?v=4',
    name: 'Nacho Orlandoni',
    title: 'Developer',
    links: [
      { icon: 'github', link: 'https://github.com/IOrlandoni' },
    ]
  }, {
    avatar: 'https://avatars.githubusercontent.com/u/6552521?v=4',
    name: 'Christian Klemm',
    title: 'Developer',
    links: [
      { icon: 'github', link: 'https://github.com/klemmchr' },
    ]
  }, {
    avatar: 'https://avatars.githubusercontent.com/u/12032557?v=4',
    name: 'Mindaugas Laganeckas',
    title: 'Developer',
    links: [
      { icon: 'github', link: 'https://github.com/MindaugasLaganeckas' },
    ]
  }, {
    avatar: 'https://avatars.githubusercontent.com/u/58763315?v=4',
    name: 'Neil Cuzon',
    title: 'Developer',
    links: [
      { icon: 'github', link: 'https://github.com/NeilCuzon' },
    ]
  }, {
    avatar: 'https://avatars.githubusercontent.com/u/19526120?v=4',
    name: 'Adrian Hall',
    title: 'Developer',
    links: [
      { icon: 'github', link: 'https://github.com/spopida' },
    ]
  }, {
    avatar: 'https://avatars.githubusercontent.com/u/53054099?v=4',
    name: 'Yash Singh',
    title: 'Developer',
    links: [
      { icon: 'github', link: 'https://github.com/Yash-Singh1' },
    ]
  },
 ]
 </script>
 <div class="vp-doc" >
  <h2 id="meet-the-team"> Meet The Team </h2>
  <VPTeamMembers size="small" :members="members" />
 </div>
 <style>
  .image-container .image-src {
    margin: 1rem auto;
    max-width: 100%;
    width: 100%;
  }
  .dark .image-src{
    filter: invert(1) hue-rotate(217deg)  contrast(0.72);
    max-width: 100%;
  }
  .vp-doc {
    align-items: center;
    flex-direction: column;
    display: flex;
    margin-top: 2.5rem;
  }
  .vp-doc h2 {
    margin: 48px 0 16px;
    border-top: 1px solid var(--vp-c-divider-light);
    padding-top: 24px;
    letter-spacing: -.02em;
    line-height: 32px;
    font-size: 24px;
 }
 </style>
--- a/docs/vite.config.ts
+++ b/docs/vite.config.ts
@@ -1,46 +0,0 @@
 import { defineConfig, searchForWorkspaceRoot } from 'vite';
 import path from 'path';
 // @ts-ignore: still in alpha
 import { SearchPlugin } from 'vitepress-plugin-search';
 const virtualModuleId = 'virtual:mermaid-config';
 const resolvedVirtualModuleId = '\0' + virtualModuleId;
 export default defineConfig({
  plugins: [
    SearchPlugin(),
    {
      // TODO: will be fixed in the next vitepress release.
      name: 'fix-virtual',
      async resolveId(id) {
        if (id === virtualModuleId) {
          return resolvedVirtualModuleId;
        }
      },
      async load(this, id) {
        if (id === resolvedVirtualModuleId) {
          return `export default ${JSON.stringify({
            securityLevel: 'loose',
            startOnLoad: false,
          })};`;
        }
      },
    },
  ],
  resolve: {
    alias: {
      mermaid: path.join(__dirname, '../../dist/mermaid.esm.min.mjs'), // Use this one to build
    },
  },
  server: {
    fs: {
      allow: [
        // search up for workspace root
        searchForWorkspaceRoot(process.cwd()),
        // Allow serving files from one level up to the project root
        path.join(__dirname, '..'),
      ],
    },
  },
 });
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -31,15 +31,13 @@
    "build:esbuild": "concurrently \"pnpm build:code\" \"pnpm build:types\"",
    "build": "pnpm clean; pnpm build:esbuild",
    "dev": "node .esbuild/serve.cjs",
-    "predocs:build": "rimraf docs && pnpm docs:code",
+    "docs:code": "typedoc --plugin typedoc-plugin-markdown --readme none --githubPages false --hideBreadcrumbs --gitRemote disable --hideInPageTOC --namedAnchors --out src/docs/config/setup --entryPointStrategy expand src/defaultConfig.ts src/config.ts src/mermaidAPI.ts",
-    "docs:build": "rimraf ../../docs; ts-node-esm src/docs.mts",
+    "docs:build": "rimraf ../../docs && pnpm docs:code && ts-node-esm src/docs.mts",
    "docs:verify": "ts-node-esm src/docs.mts --verify",
-    "docs:code": "typedoc --plugin typedoc-plugin-markdown --readme none --hideBreadcrumbs --gitRemote disable --hideInPageTOC --namedAnchors --out src/docs/config/setup --entryPointStrategy expand src/defaultConfig.ts src/config.ts src/mermaidAPI.ts",
+    "docs:build:vitepress": "rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress",
-    "predocs:dev": "pnpm docs:code",
+    "docs:dev": "pnpm docs:build:vitepress && vitepress dev src/vitepress",
-    "docs:dev": "vitepress dev src/docs",
+    "docs:bundle": "pnpm docs:build:vitepress && vitepress build src/vitepress",
-    "predocs:bundle": "pnpm docs:code",
+    "docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress",
    "docs:bundle": "vitepress build src/docs",
    "docs:serve": "vitepress serve src/docs",
    "release": "pnpm build",
    "lint": "eslint --cache --ignore-path .gitignore . && pnpm lint:jison && prettier --check .",
    "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
--- a/packages/mermaid/src/docs.mts
+++ b/packages/mermaid/src/docs.mts
@@ -45,10 +45,15 @@ const MERMAID_MAJOR_VERSION = (
  JSON.parse(readFileSync('../mermaid/package.json', 'utf8')).version as string
 ).split('.')[0];
 const verifyOnly: boolean = process.argv.includes('--verify');
 const git: boolean = process.argv.includes('--git');
 const vitepress: boolean = process.argv.includes('--vitepress');
 const noHeader: boolean = process.argv.includes('--noHeader') || vitepress;
 // These paths are from the root of the mono-repo, not from the
 // mermaid sub-directory
 const SOURCE_DOCS_DIR = 'src/docs';
-const FINAL_DOCS_DIR = '../../docs';
+const FINAL_DOCS_DIR = vitepress ? 'src/vitepress' : '../../docs';
 const AUTOGENERATED_TEXT = `> **Warning**
 > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. 
@@ -60,9 +65,6 @@ const LOGMSG_COPIED = `, and copied to ${FINAL_DOCS_DIR}`;
 const WARN_DOCSDIR_DOESNT_MATCH = `Changed files were transformed in ${SOURCE_DOCS_DIR} but do not match the files in ${FINAL_DOCS_DIR}. Please run pnpm docs:build after making changes to ${SOURCE_DOCS_DIR} to update the ${FINAL_DOCS_DIR} directory with the transformed files.`;
 const verifyOnly: boolean = process.argv.includes('--verify');
 const git: boolean = process.argv.includes('--git');
 // TODO: Read from .prettierrc?
 const prettierConfig: prettier.Config = {
  useTabs: false,
@@ -176,8 +178,17 @@ const transformMarkdown = (file: string) => {
    return [c];
  });
-  // Add the AUTOGENERATED_TEXT to the start of the file
+  let transformed = remark.stringify(out);
-  const transformed = `${AUTOGENERATED_TEXT}\n${remark.stringify(out)}`;
+  if (!noHeader) {
    // Add the AUTOGENERATED_TEXT to the start of the file
    transformed = `${AUTOGENERATED_TEXT}\n${transformed}`;
  }
  if (vitepress && file === 'src/docs/index.md') {
    // Skip transforming index if vitepress is enabled
    transformed = doc;
  }
  const formatted = prettier.format(transformed, {
    parser: 'markdown',
    ...prettierConfig,
@@ -206,6 +217,11 @@ const transformHtml = (filename: string) => {
      /<MERMAID_VERSION>/g,
      MERMAID_MAJOR_VERSION
    );
    if (noHeader) {
      return fileContents;
    }
    const jsdom = new JSDOM(fileContents);
    const htmlDoc = jsdom.window.document;
    const autoGeneratedComment = jsdom.window.document.createComment(AUTOGENERATED_TEXT);
@@ -224,6 +240,10 @@ const transformHtml = (filename: string) => {
 };
 const getFilesFromGlobs = async (globs: string[]): Promise<string[]> => {
  globs.push('!**/dist');
  if (!vitepress) {
    globs.push('!**/.vitepress', '!**/vite.config.ts', '!src/docs/index.md');
  }
  return await globby(globs, { dot: true });
 };
--- a/packages/mermaid/src/docs/.vitepress/blocks-markdown.ts
+++ b/packages/mermaid/src/docs/.vitepress/blocks-markdown.ts
@@ -1,25 +0,0 @@
 const CustomMarkdown = (md) => {
  const fence = md.renderer.rules.fence.bind(md.renderer.rules);
  md.renderer.rules.fence = (tokens, index, options, env, slf) => {
    const token = tokens[index];
    if (token.info.trim() === 'warning') {
      return `<div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>${token.content}}</p></div>`;
    }
    if (token.info.trim() === 'note') {
      return `<div class="tip custom-block"><p class="custom-block-title">NOTE</p><p>${token.content}}</p></div>`;
    }
    if (token.info.trim() === 'jison') {
      return `<div class="language-"><button class="copy"></button><span class="lang">jison</span><pre><code>${token.content
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')}}</code></pre></div>`;
    }
    return fence(tokens, index, options, env, slf);
  };
 };
 export default CustomMarkdown;
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -1,14 +1,12 @@
 import { version } from '../../../package.json';
 import MermaidExample from './mermaid-markdown-all';
 import { MermaidMarkdown } from 'vitepress-plugin-mermaid';
-import CustomMarkdown from './blocks-markdown';
+import { defineConfig, MarkdownOptions } from 'vitepress';
 import { defineConfig } from 'vitepress';
-const allMarkdownTransformers = {
+const allMarkdownTransformers: MarkdownOptions = {
  config: async (md) => {
    MermaidMarkdown(md);
    await MermaidExample(md);
-    CustomMarkdown(md);
+    MermaidMarkdown(md);
  },
 };
@@ -28,11 +26,6 @@ export default defineConfig({
    sidebar: {
      '/': sidebarAll(),
      // "/intro/": sidebarIntro(),
      // "/syntax/": sidebarSyntax(),
      // "/config": sidebarConfig(),
      // "/misc/": sidebarMisc(),
      // "/community/": sidebarCommunity(),
    },
  },
 });
@@ -90,10 +83,6 @@ function sidebarAll() {
    ...sidebarConfig(),
    ...sidebarMisc(),
    ...sidebarCommunity(),
    // {
    //   text: "Generated",
    //   items: [{ text: "modules", link: "docs/code/modules" }],
    // },
  ];
 }
--- a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
+++ b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
@@ -1,32 +1,55 @@
 import type { MarkdownRenderer } from 'vitepress';
 import shiki from 'shiki';
-const MermaidExample = async (md) => {
+const MermaidExample = async (md: MarkdownRenderer) => {
-  const fence = md.renderer.rules.fence.bind(md.renderer.rules);
+  const defaultRenderer = md.renderer.rules.fence;
-  const highlighter = await shiki.getHighlighter({ theme: 'material-palenight' });
+  if (!defaultRenderer) {
    throw new Error('defaultRenderer is undefined');
  }
  const highlighter = await shiki.getHighlighter({
    theme: 'material-palenight',
    langs: ['mermaid'],
  });
  md.renderer.rules.fence = (tokens, index, options, env, slf) => {
    const token = tokens[index];
    // console.log("==>",token.info);
    if (token.info.trim() === 'mermaid-example') {
-      let code = highlighter.codeToHtml(token.content, { lang: 'mermaid' });
+      const highlight = highlighter
-      code = code.replace('#2e3440ff', 'transparent');
+        .codeToHtml(token.content, { lang: 'mermaid' })
-      code = code.replace('#292D3E', 'transparent');
+        .replace(/<span/g, '<span v-pre')
        .replace('#2e3440ff', 'transparent')
        .replace('#292D3E', 'transparent');
-      code =
+      return `<h5>Code:</h5>
-        '<h5>Code:</h5>' +
+          <div class="language-mermaid">
-        `<div class="language-mermaid">` +
+          <button class="copy"></button>
-        `<button class="copy"></button><span class="lang">mermaid</span>` +
+          <span class="lang">mermaid</span>
-        code +
+${highlight}
-        '</div>';
+          </div>
-
+          <h5>Diagram:</h5>`;
      // return code;
      return `${code}
          <h5>Render:</h5>
          <Mermaid id="me${index}"  graph="${encodeURIComponent(token.content)}"></Mermaid>`;
    }
-    return fence(tokens, index, options, env, slf);
+    if (token.info.trim() === 'warning') {
      return `<div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>${token.content}}</p></div>`;
    }
    if (token.info.trim() === 'note') {
      return `<div class="tip custom-block"><p class="custom-block-title">NOTE</p><p>${token.content}}</p></div>`;
    }
    if (token.info.trim() === 'jison') {
      return `<div class="language-">
      <button class="copy"></button>
      <span class="lang">jison</span>
      <pre>
      <code>${token.content.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</code>
      </pre>
      </div>`;
    }
    return defaultRenderer(tokens, index, options, env, slf);
  };
 };
--- a/packages/mermaid/src/docs/config/setup/README.md
+++ b/packages/mermaid/src/docs/config/setup/README.md
@@ -0,0 +1,7 @@
 # mermaid
 ## Modules
 - [config](modules/config.md)
 - [defaultConfig](modules/defaultConfig.md)
 - [mermaidAPI](modules/mermaidAPI.md)
--- a/packages/mermaid/src/docs/config/setup/modules/config.md
+++ b/packages/mermaid/src/docs/config/setup/modules/config.md
@@ -0,0 +1,270 @@
 # Module: config
 ## Variables
 ### <a id="defaultconfig" name="defaultconfig"></a> defaultConfig
 • `Const` **defaultConfig**: `MermaidConfig`
 #### Defined in
 config.ts:7
 ## Functions
 ### <a id="adddirective" name="adddirective"></a> addDirective
 ▸ **addDirective**(`directive`): `void`
 Pushes in a directive to the configuration
 #### Parameters
 | Name        | Type  | Description              |
 | :---------- | :---- | :----------------------- |
 | `directive` | `any` | The directive to push in |
 #### Returns
 `void`
 #### Defined in
 config.ts:191
 ---
 ### <a id="getconfig" name="getconfig"></a> getConfig
 ▸ **getConfig**(): `MermaidConfig`
 ## getConfig
 | Function  | Description               | Type        | Return Values                  |
 | --------- | ------------------------- | ----------- | ------------------------------ |
 | getConfig | Obtains the currentConfig | Get Request | Any Values from current Config |
 **Notes**: Returns **any** the currentConfig
 #### Returns
 `MermaidConfig`
 The currentConfig
 #### Defined in
 config.ts:136
 ---
 ### <a id="getsiteconfig" name="getsiteconfig"></a> getSiteConfig
 ▸ **getSiteConfig**(): `MermaidConfig`
 ## getSiteConfig
 | Function      | Description                                       | Type        | Values                           |
 | ------------- | ------------------------------------------------- | ----------- | -------------------------------- |
 | setSiteConfig | Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig |
 **Notes**: Returns **any** values in siteConfig.
 #### Returns
 `MermaidConfig`
 The siteConfig
 #### Defined in
 config.ts:96
 ---
 ### <a id="reset" name="reset"></a> reset
 ▸ **reset**(`config?`): `void`
 ## reset
 | Function | Description                  | Type        | Required | Values |
 | -------- | ---------------------------- | ----------- | -------- | ------ |
 | reset    | Resets currentConfig to conf | Put Request | Required | None   |
 ## conf
 | Parameter | Description                                                    | Type       | Required | Values                                       |
 | --------- | -------------------------------------------------------------- | ---------- | -------- | -------------------------------------------- |
 | conf      | base set of values, which currentConfig could be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array |
 **Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`)
 #### Parameters
 | Name     | Type            | Default value | Description                                                                                                                                                   |
 | :------- | :-------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `config` | `MermaidConfig` | `siteConfig`  | base set of values, which currentConfig could be **reset** to. Defaults to the current siteConfig (e.g returned by [getSiteConfig](config.md#getsiteconfig)). |
 #### Returns
 `void`
 #### Defined in
 config.ts:223
 ---
 ### <a id="sanitize" name="sanitize"></a> sanitize
 ▸ **sanitize**(`options`): `void`
 ## sanitize
 | Function | Description                            | Type        | Values |
 | -------- | -------------------------------------- | ----------- | ------ |
 | sanitize | Sets the siteConfig to desired values. | Put Request | None   |
 Ensures options parameter does not attempt to override siteConfig secure keys **Notes**: modifies
 options in-place
 #### Parameters
 | Name      | Type  | Description                       |
 | :-------- | :---- | :-------------------------------- |
 | `options` | `any` | The potential setConfig parameter |
 #### Returns
 `void`
 #### Defined in
 config.ts:151
 ---
 ### <a id="saveconfigfrominitialize" name="saveconfigfrominitialize"></a> saveConfigFromInitialize
 ▸ **saveConfigFromInitialize**(`conf`): `void`
 #### Parameters
 | Name   | Type            |
 | :----- | :-------------- |
 | `conf` | `MermaidConfig` |
 #### Returns
 `void`
 #### Defined in
 config.ts:75
 ---
 ### <a id="setconfig" name="setconfig"></a> setConfig
 ▸ **setConfig**(`conf`): `MermaidConfig`
 ## setConfig
 | Function      | Description                           | Type        | Values                                  |
 | ------------- | ------------------------------------- | ----------- | --------------------------------------- |
 | setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
 **Notes**: Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure
 keys. Any values found in conf with key found in siteConfig.secure will be replaced with the
 corresponding siteConfig value.
 #### Parameters
 | Name   | Type            | Description                 |
 | :----- | :-------------- | :-------------------------- |
 | `conf` | `MermaidConfig` | The potential currentConfig |
 #### Returns
 `MermaidConfig`
 The currentConfig merged with the sanitized conf
 #### Defined in
 config.ts:113
 ---
 ### <a id="setsiteconfig" name="setsiteconfig"></a> setSiteConfig
 ▸ **setSiteConfig**(`conf`): `MermaidConfig`
 ## setSiteConfig
 | Function      | Description                           | Type        | Values                                  |
 | ------------- | ------------------------------------- | ----------- | --------------------------------------- |
 | setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
 **Notes:** Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls
 to reset() will reset the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig)
 will reset siteConfig and currentConfig to the defaultConfig Note: currentConfig is set in this
 function _Default value: At default, will mirror Global Config_
 #### Parameters
 | Name   | Type            | Description                                 |
 | :----- | :-------------- | :------------------------------------------ |
 | `conf` | `MermaidConfig` | The base currentConfig to use as siteConfig |
 #### Returns
 `MermaidConfig`
 The new siteConfig
 #### Defined in
 config.ts:61
 ---
 ### <a id="updatecurrentconfig" name="updatecurrentconfig"></a> updateCurrentConfig
 ▸ **updateCurrentConfig**(`siteCfg`, `_directives`): `MermaidConfig`
 #### Parameters
 | Name          | Type            |
 | :------------ | :-------------- |
 | `siteCfg`     | `MermaidConfig` |
 | `_directives` | `any`[]         |
 #### Returns
 `MermaidConfig`
 #### Defined in
 config.ts:14
 ---
 ### <a id="updatesiteconfig" name="updatesiteconfig"></a> updateSiteConfig
 ▸ **updateSiteConfig**(`conf`): `MermaidConfig`
 #### Parameters
 | Name   | Type            |
 | :----- | :-------------- |
 | `conf` | `MermaidConfig` |
 #### Returns
 `MermaidConfig`
 #### Defined in
 config.ts:79
--- a/packages/mermaid/src/docs/config/setup/modules/defaultConfig.md
+++ b/packages/mermaid/src/docs/config/setup/modules/defaultConfig.md
@@ -0,0 +1,50 @@
 # Module: defaultConfig
 ## Variables
 ### <a id="configkeys" name="configkeys"></a> configKeys
 • `Const` **configKeys**: `string`[]
 #### Defined in
 defaultConfig.ts:1869
 ---
 ### <a id="default" name="default"></a> default
 • `Const` **default**: `Partial`<`MermaidConfig`\>
 **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click
 here](8.6.0_docs.md)].**
 ## **What follows are config instructions for older versions**
 These are the default options which can be overridden with the initialization call like so:
 **Example 1:**
 ```js
 mermaid.initialize({ flowchart: { htmlLabels: false } });
 ```
 **Example 2:**
 ```html
 <script>
  const config = {
    startOnLoad: true,
    flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
    securityLevel: 'loose',
  };
  mermaid.initialize(config);
 </script>
 ```
 A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults).
 A description of each option follows below.
 #### Defined in
 defaultConfig.ts:33
--- a/packages/mermaid/src/docs/config/setup/modules/mermaidAPI.md
+++ b/packages/mermaid/src/docs/config/setup/modules/mermaidAPI.md
@@ -0,0 +1,57 @@
 # Module: mermaidAPI
 ## References
 ### <a id="default" name="default"></a> default
 Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
 ## Variables
 ### <a id="mermaidapi" name="mermaidapi"></a> mermaidAPI
 • `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `Promise`<`void`\> ; `parse`: (`text`: `string`, `parseError?`: `ParseErrorFunction`) => `boolean` ; `parseDirective`: (`p`: `any`, `statement`: `string`, `context`: `string`, `type`: `string`) => `void` ; `render`: (`id`: `string`, `text`: `string`, `cb`: (`svgCode`: `string`, `bindFunctions?`: (`element`: `Element`) => `void`) => `void`, `container?`: `Element`) => `Promise`<`void`\> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }\>
 #### Defined in
 mermaidAPI.ts:485
 ## Functions
 ### <a id="decodeentities" name="decodeentities"></a> decodeEntities
 ▸ **decodeEntities**(`text`): `string`
 #### Parameters
 | Name   | Type     |
 | :----- | :------- |
 | `text` | `string` |
 #### Returns
 `string`
 #### Defined in
 mermaidAPI.ts:72
 ---
 ### <a id="encodeentities" name="encodeentities"></a> encodeEntities
 ▸ **encodeEntities**(`text`): `string`
 #### Parameters
 | Name   | Type     |
 | :----- | :------- |
 | `text` | `string` |
 #### Returns
 `string`
 #### Defined in
 mermaidAPI.ts:46
		`@@ -1 +0,0 @@`
			TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.