From 6da6edfc0105fb2f637f341d1635e331affeea39 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Thu, 17 Nov 2022 18:18:34 +0000
Subject: [PATCH 1/2] refactor(docs): use default vitepress highlighter

Use the default vitepress highlighter instead of making our own
highlighter using shiki.

The benefits are:
  - We don't need to directly depend on shiki
  - `mermaid-example` code-blocks will use the same highlighting
    as other languages (e.g. `html`/`js`).
  - We can control the theme from the global `vitepress` config.
  - Darkmode/lightmode themes are supported
  - Escaping is already handled by the default highlight function
---
 packages/mermaid/package.json                 |  1 -
 .../docs/.vitepress/mermaid-markdown-all.ts   | 32 +++++++++----------
 pnpm-lock.yaml                                |  3 --
 3 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 842e9ba9a..9a713ed9c 100644
--- a/packages/mermaid/package.json
+++ b/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",
diff --git a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
index db9b764bc..3a9521375 100644
--- a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
+++ b/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}
+            <button class="copy"></button>
+            <span class="lang">mermaid</span>
+            ${
+              // 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>`;
     }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 11703bd03..85afcb31d 100644
--- a/pnpm-lock.yaml
+++ b/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

From c30aa6f9cfeba9697a19111d1716d46e86a33208 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Thu, 17 Nov 2022 18:52:45 +0000
Subject: [PATCH 2/2] style(docs): use `github-dark` hightlight theme

Use the `github-dark` highlight theme for fence blocks in vitepress,
instead of the default `material-palenight` theme.

This increases the contrast ratio of `#comments` from 2.75:1 to 4.43:1,
which is a lot more visible.

It still doesn't reach WCAG 2.0 level AA contrast standards,
which requires 4.5:1 as a minimum constrast ratio, but 4.43:1 is
pretty close, and we don't need to manually modify the theme's colours.
---
 packages/mermaid/src/docs/.vitepress/config.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index 7d3ec40dd..03f037584 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/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);