feat: support interpolation inside code blocks

src/node/markdown/plugins/highlight.ts

@@ -5,23 +5,25 @@ export async function highlight(theme: ThemeOptions = 'material-palenight') {
   const themes = typeof theme === 'string' ? [theme] : [theme.dark, theme.light]
   const highlighter = await getHighlighter({ themes })
   const preRE = /^<pre.*?>/
+  const vueRE = /-vue$/
 
   return (str: string, lang: string) => {
-    lang = lang || 'text'
+    const vPre = vueRE.test(lang) ? '' : 'v-pre'
+    lang = lang.replace(vueRE, '')
 
     if (typeof theme === 'string') {
       return highlighter
         .codeToHtml(str, { lang, theme })
-        .replace(preRE, '<pre v-pre>')
+        .replace(preRE, `<pre ${vPre}>`)
     }
 
     const dark = highlighter
       .codeToHtml(str, { lang, theme: theme.dark })
-      .replace(preRE, '<pre v-pre class="vp-code-dark">')
+      .replace(preRE, `<pre ${vPre} class="vp-code-dark">`)
 
     const light = highlighter
       .codeToHtml(str, { lang, theme: theme.light })
-      .replace(preRE, '<pre v-pre class="vp-code-light">')
+      .replace(preRE, `<pre ${vPre} class="vp-code-light">`)
 
     return dark + light
   }

src/node/markdown/plugins/preWrapper.ts

@@ -13,7 +13,7 @@ export const preWrapperPlugin = (md: MarkdownIt) => {
   const fence = md.renderer.rules.fence!
   md.renderer.rules.fence = (...args) => {
     const [tokens, idx] = args
-    const lang = tokens[idx].info.trim()
+    const lang = tokens[idx].info.trim().replace(/-vue$/, '')
     const rawCode = fence(...args)
     return `<div class="language-${lang}"><span class="lang">${
       lang === 'vue-html' ? 'template' : lang