docs: fix nested code block

docs/custom/config-monaco.md

@@ -19,27 +19,27 @@ Learn more about [configuring Monaco](https://github.com/Microsoft/monaco-editor
 To use Monaco in your slides, simply append `{monaco}` to your code snippets:
 
 ~~~md
-```js
+\```js
 const count = ref(1)
 const plusOne = computed(() => count.value + 1)
 
 console.log(plusOne.value) // 2
 
 plusOne.value++ // error
-```
+\```
 ~~~
 
 To
 
 ~~~md
-```js {monaco}
+\```js {monaco}
 const count = ref(1)
 const plusOne = computed(() => count.value + 1)
 
 console.log(plusOne.value) // 2
 
 plusOne.value++ // error
-```
+\```
 ~~~
 
 ## Exporting
@@ -62,7 +62,7 @@ import { ref } from 'vue'
 import { useMouse } from '@vueuse/core'
 
 const counter = ref(0)
-```
+\```
 ~~~
 
 In the example above, just make sure `vue` and `@vueuse/core` are installed locally as dependencies / devDependencies, Slidev will handle the rest and your editor will just work!

docs/guide/syntax.md

@@ -15,9 +15,9 @@ Hello World
 
 Directly use code blocks for highlighting
 
-```ts
+\```ts
 console.log('Helle World')
-```
+\```
 
 ---
 
@@ -67,45 +67,45 @@ Refer to [customization](/custom/) for more details.
 A big reason I am making this is that I need to make my code looks just right in the slides. So just as you expected, you can use Markdown favored code block to highlight your code.
 
 ~~~md
-```ts
+\```ts
 console.log('HelloWorld')
-```
+\```
 ~~~
 
 To highlight specific lines, simply add line numbers within bracket `{}`. Line numbers start count from 1.
 
 ~~~md
-```ts {2,3}
+\```ts {2,3}
 function add(
   a: Ref<number> | number,
   b: Ref<number> | number
 ) {
   return computed(() => unref(a) + unref(b))
 }
-```
+\```
 ~~~
 
 To change the highlight in multiple steps, you can use `|` to separate them. For example
 
 ~~~md
-```ts {2-3|5|all}
+\```ts {2-3|5|all}
 function add(
   a: Ref<number> | number,
   b: Ref<number> | number
 ) {
   return computed(() => unref(a) + unref(b))
 }
-```
+\```
 ~~~
 
 This will highlight on `a` and `b` first, then goes to the `computed` line after one click, and then, the whole block. Learn more about the [clicks animations here](/guide/animations).
 
 Whenever you want to do some modification in the presentation, simply add `{monaco}` after the language id, it turns the block into a full-featured Monaco editor!
 
 ~~~md
-```ts {monaco}
+\```ts {monaco}
 console.log('HelloWorld')
-```
+\```
 ~~~
 
 ## Notes

docs/vite.config.ts

@@ -35,6 +35,15 @@ const config: UserConfig = {
     WindiCSS({
       preflight: false,
     }),
+    {
+      name: 'code-block-escape',
+      enforce: 'post',
+      transform(code, id) {
+        if (!id.endsWith('.md'))
+          return
+        return code.replace(/\\```/g, '```')
+      },
+    },
   ],
 }