From 3f11794390062e36b1146c648945c5972bb6aae3 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 23 Nov 2023 00:29:16 +0100
Subject: [PATCH] chore: update deps

---
 docs/.vitepress/config.ts              | 18 +++++++++++++++++-
 docs/guide/markdown.md                 | 22 ++++++++--------------
 src/node/markdown/plugins/highlight.ts |  3 ++-
 3 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 4818af45..a2fc7399 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -13,7 +13,23 @@ export default defineConfig({
   cleanUrls: true,
 
   markdown: {
-    math: true
+    math: true,
+    transformers: [
+      // We use `[!!code` in demo to prevent transformation, here we revert it back.
+      {
+        code(code) {
+          for (const line of code.children) {
+            if (line.type !== 'element') continue
+            for (const token of line.children) {
+              if (token.type === 'element' && token.children[0].type === 'text') {
+                token.children[0].value = token.children[0].value.replace('[!!code', '[!code')
+              }
+            }
+          }
+        }
+       
+      }
+    ]
   },
 
   sitemap: {
diff --git a/docs/guide/markdown.md b/docs/guide/markdown.md
index 8c9fb44e..8806bd64 100644
--- a/docs/guide/markdown.md
+++ b/docs/guide/markdown.md
@@ -377,7 +377,7 @@ export default { // Highlighted
 }
 ```
 
-Alternatively, it's possible to highlight directly in the line by using the `// [!code hl]` comment.
+Alternatively, it's possible to highlight directly in the line by using the `// [!code hightlight]` comment.
 
 **Input**
 
@@ -386,7 +386,7 @@ Alternatively, it's possible to highlight directly in the line by using the `//
 export default {
   data () {
     return {
-      msg: 'Highlighted!' // [!code  hl]
+      msg: 'Highlighted!' // [!!code highlight]
     }
   }
 }
@@ -399,7 +399,7 @@ export default {
 export default {
   data() {
     return {
-      msg: 'Highlighted!' // [!code hl]
+      msg: 'Highlighted!' // [!code highlight]
     }
   }
 }
@@ -413,14 +413,12 @@ Additionally, you can define a number of lines to focus using `// [!code focus:<
 
 **Input**
 
-Note that only one space is required after `!code`, here are two to prevent processing.
-
 ````
 ```js
 export default {
   data () {
     return {
-      msg: 'Focused!' // [!code  focus]
+      msg: 'Focused!' // [!!code focus]
     }
   }
 }
@@ -445,15 +443,13 @@ Adding the `// [!code --]` or `// [!code ++]` comments on a line will create a d
 
 **Input**
 
-Note that only one space is required after `!code`, here are two to prevent processing.
-
 ````
 ```js
 export default {
   data () {
     return {
-      msg: 'Removed' // [!code  --]
-      msg: 'Added' // [!code  ++]
+      msg: 'Removed' // [!!code --]
+      msg: 'Added' // [!!code ++]
     }
   }
 }
@@ -479,15 +475,13 @@ Adding the `// [!code warning]` or `// [!code error]` comments on a line will co
 
 **Input**
 
-Note that only one space is required after `!code`, here are two to prevent processing.
-
 ````
 ```js
 export default {
   data () {
     return {
-      msg: 'Error', // [!code  error]
-      msg: 'Warning' // [!code  warning]
+      msg: 'Error', // [!!code error]
+      msg: 'Warning' // [!!code warning]
     }
   }
 }
diff --git a/src/node/markdown/plugins/highlight.ts b/src/node/markdown/plugins/highlight.ts
index cbeaf7ef..7e3b1062 100644
--- a/src/node/markdown/plugins/highlight.ts
+++ b/src/node/markdown/plugins/highlight.ts
@@ -4,6 +4,7 @@ import type { LanguageInput, ShikijiTransformer } from 'shikiji'
 import {
   bundledLanguages,
   getHighlighter,
+  addClassToHast,
   isPlaintext as isPlainLang
 } from 'shikiji'
 import type { Logger } from 'vite'
@@ -76,7 +77,7 @@ export async function highlight(
     transformerNotationErrorLevel(),
     {
       pre(node) {
-        node.properties.class = 'vp-code shiki'
+        addClassToHast(node, 'vp-code')
       }
     }
   ]