Merge pull request #3807 from aloisklink/docs/update-code-highlighting-theme

Use `github-dark` to highlight fence blocks in vitepress docs

packages/mermaid/package.json

@@ -91,7 +91,6 @@
     "prettier": "^2.7.1",
     "remark": "^14.0.2",
     "rimraf": "^3.0.2",
-    "shiki": "^0.11.1",
     "start-server-and-test": "^1.14.0",
     "typedoc": "^0.23.18",
     "typedoc-plugin-markdown": "^3.13.6",

packages/mermaid/src/docs/.vitepress/config.ts

@@ -4,6 +4,8 @@ import { MermaidMarkdown } from 'vitepress-plugin-mermaid';
 import { defineConfig, MarkdownOptions } from 'vitepress';
 
 const allMarkdownTransformers: MarkdownOptions = {
+  // the shiki theme to highlight code blocks
+  theme: 'github-dark',
   config: async (md) => {
     await MermaidExample(md);
     MermaidMarkdown(md);

packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts

@@ -1,8 +1,5 @@
 import type { MarkdownRenderer } from 'vitepress';
 
-// Note: using "import shiki from 'shiki' and then "const highlighter = await shiki.getHighlighter(...) does not work 2022-11-15
-import { getHighlighter } from 'shiki';
-
 const MermaidExample = async (md: MarkdownRenderer) => {
   const defaultRenderer = md.renderer.rules.fence;
 
@@ -10,26 +7,29 @@ const MermaidExample = async (md: MarkdownRenderer) => {
     throw new Error('defaultRenderer is undefined');
   }
 
-  const highlighter = await getHighlighter({
-    theme: 'material-palenight',
-    langs: ['mermaid'],
-  });
-
   md.renderer.rules.fence = (tokens, index, options, env, slf) => {
     const token = tokens[index];
 
     if (token.info.trim() === 'mermaid-example') {
-      const highlight = highlighter
-        .codeToHtml(token.content, { lang: 'mermaid' })
-        .replace(/<span/g, '<span v-pre')
-        .replace('#2e3440ff', 'transparent')
-        .replace('#292D3E', 'transparent');
+      if (!md.options.highlight) {
+        // this function is always created by vitepress, but we need to check it
+        // anyway to make TypeScript happy
+        throw new Error(
+          'Missing MarkdownIt highlight function (should be automatically created by vitepress'
+        );
+      }
 
+      // doing ```mermaid-example {line-numbers=5 highlight=14-17} is not supported
+      const langAttrs = '';
       return `<h5>Code:</h5>
           <div class="language-mermaid">
             <button class="copy"></button>
             <span class="lang">mermaid</span>
-${highlight}
+            ${
+              // html is pre-escaped by the highlight function
+              // (it also adds `v-pre` to ignore Vue template syntax)
+              md.options.highlight(token.content, 'mermaid', langAttrs)
+            }
           </div>
           <h5>Diagram:</h5>`;
     }

pnpm-lock.yaml

@@ -275,9 +275,6 @@ importers:
       rimraf:
         specifier: ^3.0.2
         version: 3.0.2
-      shiki:
-        specifier: ^0.11.1
-        version: 0.11.1
       start-server-and-test:
         specifier: ^1.14.0
         version: 1.14.0