fix(md): escape vue template with character references, close #99

demo/composable-vue/slides.md

@@ -202,7 +202,7 @@ watch(counter, count => {
 ```html
 <template>
   <button @click="counter += 1">
-    Counter is {\{ counter }}
+    Counter is {{ counter }}
   </button>
 </template>
 ```

packages/slidev/node/plugins/fix.ts

@@ -15,13 +15,5 @@ export function createFixPlugins(
           return code.replace(/__DEV__/g, DEV)
       },
     },
-    {
-      name: 'slidev:vue-escape-post',
-      enforce: 'post',
-      transform(code, id) {
-        if (id.endsWith('.md'))
-          return code.replace(/\\{/g, '{')
-      },
-    },
   ]
 }

packages/slidev/node/plugins/markdown-it-prism.ts

@@ -107,7 +107,6 @@ function selectLanguage(options: Options, lang: string): [string, Grammar | unde
  *  (markdown-it’s langPrefix + lang). If Prism knows {@code lang}, {@code text} will be highlighted by it.
  */
 function highlight(markdownit: MarkdownIt, options: Options, text: string, lang: string): string {
-  text = escapeVueInCode(text)
   const [langToUse, prismLang] = selectLanguage(options, lang)
   const code = text
     .trimEnd()
@@ -120,7 +119,7 @@ function highlight(markdownit: MarkdownIt, options: Options, text: string, lang:
   const classAttribute = langToUse
     ? ` class="slidev-code ${markdownit.options.langPrefix}${markdownit.utils.escapeHtml(langToUse)}"`
     : ''
-  return `<pre${classAttribute}><code>${code}</code></pre>`
+  return escapeVueInCode(`<pre${classAttribute}><code>${code}</code></pre>`)
 }
 
 /**

packages/slidev/node/plugins/markdown-it-shiki.ts

@@ -49,19 +49,17 @@ const MarkdownItShiki: MarkdownIt.PluginWithOptions<ShikiOptions> = (markdownit,
   const { darkModeThemes } = resolveShikiOptions(options!)
 
   markdownit.options.highlight = (code, lang) => {
-    code = escapeVueInCode(code)
     if (darkModeThemes) {
       const dark = _highlighter
         .codeToHtml(code, lang || 'text', darkModeThemes.dark)
         .replace('<pre class="shiki"', '<pre class="slidev-code shiki shiki-dark"')
       const light = _highlighter
         .codeToHtml(code, lang || 'text', darkModeThemes.light)
         .replace('<pre class="shiki"', '<pre class="slidev-code shiki shiki-light"')
-      return `<pre class="shiki-container">${dark}${light}</pre>`
+      return escapeVueInCode(`<pre class="shiki-container">${dark}${light}</pre>`)
     }
     else {
-      return _highlighter.codeToHtml(code, lang || 'text')
-        .replace('<pre class="shiki"', '<pre class="slidev-code shiki"')
+      return escapeVueInCode(_highlighter.codeToHtml(code, lang || 'text').replace('<pre class="shiki"', '<pre class="slidev-code shiki"'))
     }
   }
 }

packages/slidev/node/plugins/markdown.ts

@@ -141,5 +141,5 @@ export function transformMermaid(md: string): string {
 }
 
 export function escapeVueInCode(md: string) {
-  return md.replace(/{({.*}})/g, '{\\$1')
+  return md.replace(/{{(.*)}}/g, '{{$1}}')
 }