fix(md): escape vue template in code snippent, close #95

Author: antfu

packages/slidev/node/plugins/fix.ts

@@ -16,7 +16,7 @@ export function createFixPlugins(
       },
     },
     {
-      name: 'slidev:vue-escape',
+      name: 'slidev:vue-escape-post',
       enforce: 'post',
       transform(code, id) {
         if (id.endsWith('.md'))

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

@@ -4,6 +4,7 @@
 import Prism, { Grammar } from 'prismjs'
 import loadLanguages from 'prismjs/components/'
 import MarkdownIt from 'markdown-it'
+import { escapeVueInCode } from './markdown'
 
 interface Options {
   plugins: string[]
@@ -106,6 +107,7 @@ 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()

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

@@ -1,7 +1,8 @@
-import type { ShikiHighlighter, IShikiTheme, IThemeRegistration } from 'shiki'
+import type { Highlighter as ShikiHighlighter, IShikiTheme, IThemeRegistration } from 'shiki'
 import type MarkdownIt from 'markdown-it'
 import type { ShikiOptions } from '@slidev/types'
 import { ShikiDarkModeThemes } from 'packages/types'
+import { escapeVueInCode } from './markdown'
 
 function getThemeName(theme: IThemeRegistration) {
   if (typeof theme === 'string')
@@ -48,6 +49,7 @@ 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)

packages/slidev/node/plugins/markdown.ts

@@ -130,7 +130,7 @@ export function transformPageCSS(md: string, id: string) {
 /**
  * Transform Mermaid code blocks (render done on client side)
  */
-export default function transformMermaid(md: string): string {
+export function transformMermaid(md: string): string {
   return md
     .replace(/^```mermaid\s*?({.*?})?\n([\s\S]+?)\n```/mg, (full, options = '', code = '') => {
       code = code.trim()
@@ -139,3 +139,7 @@ export default function transformMermaid(md: string): string {
       return `<Mermaid :code="'${encoded}'" v-bind="${options}" />`
     })
 }
+
+export function escapeVueInCode(md: string) {
+  return md.replace(/{({.*}})/g, '{\\$1')
+}