From 4e4d7c498030c4c4f545190e0b6f9f740274b0bc Mon Sep 17 00:00:00 2001
From: Emerson Bottero <emersonbottero@gmail.com>
Date: Thu, 26 Sep 2024 22:33:42 -0300
Subject: [PATCH] fix: docs code highlight

---
 packages/mermaid/scripts/docs.mts                    | 12 ++++++------
 .../src/docs/.vitepress/mermaid-markdown-all.ts      |  4 ++--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/mermaid/scripts/docs.mts b/packages/mermaid/scripts/docs.mts
index 374e788706..54cd0b9d49 100644
--- a/packages/mermaid/scripts/docs.mts
+++ b/packages/mermaid/scripts/docs.mts
@@ -59,11 +59,11 @@ const MERMAID_MAJOR_VERSION = MERMAID_RELEASE_VERSION.split('.')[0];
 const CDN_URL = 'https://cdn.jsdelivr.net/npm'; // 'https://unpkg.com';
 
 const MERMAID_KEYWORD = 'mermaid';
-const MERMAID_CODE_ONLY_KEYWORD = 'mermaid-example';
+const MERMAID_CODE_ONLY_KEYWORD = 'mmd';
 const MERMAID_DIAGRAM_ONLY = 'mermaid-nocode';
 
 // These keywords will produce both a mermaid diagram and a code block with the diagram source
-const MERMAID_EXAMPLE_KEYWORDS = [MERMAID_KEYWORD, 'mmd', MERMAID_CODE_ONLY_KEYWORD]; // 'mmd' is an old keyword that used to be used
+const MERMAID_EXAMPLE_KEYWORDS = [MERMAID_KEYWORD, MERMAID_CODE_ONLY_KEYWORD]; // 'mmd' is an new keyword that should be used to highlight code using shiki
 
 // These will be transformed into block quotes
 const BLOCK_QUOTE_KEYWORDS = ['note', 'tip', 'warning', 'danger'];
@@ -99,7 +99,7 @@ const generateHeader = (file: string): string => {
   const sourcePathRelativeToGenerated = posix.join(relativePath, filePathFromRoot);
   return `
 > **Warning**
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. 
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
 > ## Please edit the corresponding file in [${filePathFromRoot}](${sourcePathRelativeToGenerated}).`;
 };
 
@@ -253,9 +253,9 @@ export function transformMarkdownAst({
         node.lang = MERMAID_KEYWORD;
         return [node];
       } else if (MERMAID_EXAMPLE_KEYWORDS.includes(node.lang)) {
-        // If Vitepress, return only the original node with the language now set to 'mermaid-example' (will be rendered using custom renderer)
+        // If Vitepress, return only the original node with the language now set to 'mmd' (will be rendered using custom renderer)
         // Else Return 2 nodes:
-        //   1. the original node with the language now set to 'mermaid-example' (will be rendered as code), and
+        //   1. the original node with the language now set to 'mmd' (will be rendered as code), and
         //   2. a copy of the original node with the language set to 'mermaid' (will be rendered as a diagram)
         node.lang = MERMAID_CODE_ONLY_KEYWORD;
         return vitepress ? [node] : [node, Object.assign({}, node, { lang: MERMAID_KEYWORD })];
@@ -318,7 +318,7 @@ export function transformMarkdownAst({
  * documentation
  *
  * 1. include any included files (copy and insert the source)
- * 2. Add a `mermaid-example` block before every `mermaid` or `mmd` block On the main documentation site (one
+ * 2. Add a `mmd` block before every `mermaid` block On the main documentation site (one
  *    place where the documentation is published), this will show the code for the mermaid diagram
  * 3. Transform blocks to block quotes as needed
  * 4. Add the text that says the file is automatically generated
diff --git a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
index d1aeee5ac2..4ac601f856 100644
--- a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
+++ b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
@@ -13,10 +13,10 @@ const MermaidExample = (md: MarkdownRenderer) => {
     if (language.startsWith('mermaid')) {
       const key = index;
       return `
-      <Suspense> 
+      <Suspense>
       <template #default>
       <Mermaid id="mermaid-${key}" :showCode="${
-        language === 'mermaid-example'
+        language === 'mmd'
       }" graph="${encodeURIComponent(token.content)}"></Mermaid>
       </template>
         <!-- loading state via #fallback slot -->