fix!: don't remove shiki styles from pre and remove unnecessary transformers (#4652)

BREAKING CHANGE: `vp-adaptive-theme` class is no longer added to code blocks when there is single theme. Theme authors supporting single code theme can use `.shiki:not(.shiki-themes)` as selector. Alternatively, it might be better to use the bg/fg variables set on the `.shiki` block to keep things generic.

BREAKING CHANGE: `vp-code` class is no longer added to code blocks. Use `.shiki` or `pre.shiki` or `[class*='language-'] pre` instead.

People not customizing their themes are not affected. But if you see weird stuff, you know what to change.

Author: brc-dd

src/client/theme-default/styles/components/vp-code.css

@@ -1,7 +1,7 @@
-.dark .vp-code span {
+.dark .shiki span {
   color: var(--shiki-dark, inherit);
 }
 
-html:not(.dark) .vp-code span {
+html:not(.dark) .shiki span {
   color: var(--shiki-light, inherit);
 }

src/node/markdown/markdown.ts

@@ -215,7 +215,6 @@ export async function createMarkdownRenderer(
 
   const theme = options.theme ?? { light: 'github-light', dark: 'github-dark' }
   const codeCopyButtonTitle = options.codeCopyButtonTitle || 'Copy Code'
-  const hasSingleTheme = typeof theme === 'string' || 'name' in theme
 
   let [highlight, dispose] = options.highlight
     ? [options.highlight, () => {}]
@@ -237,9 +236,9 @@ export async function createMarkdownRenderer(
   // custom plugins
   md.use(componentPlugin, { ...options.component })
     .use(highlightLinePlugin)
-    .use(preWrapperPlugin, { codeCopyButtonTitle, hasSingleTheme })
+    .use(preWrapperPlugin, { codeCopyButtonTitle })
     .use(snippetPlugin, srcDir)
-    .use(containerPlugin, { hasSingleTheme }, options.container)
+    .use(containerPlugin, options.container)
     .use(imagePlugin, options.image)
     .use(
       linkPlugin,

src/node/markdown/plugins/containers.ts

@@ -3,40 +3,17 @@ import container from 'markdown-it-container'
 import type { RenderRule } from 'markdown-it/lib/renderer.mjs'
 import type Token from 'markdown-it/lib/token.mjs'
 import type { MarkdownEnv } from '../../shared'
-import {
-  extractTitle,
-  getAdaptiveThemeMarker,
-  type Options
-} from './preWrapper'
+import { extractTitle } from './preWrapper'
 
 export const containerPlugin = (
   md: MarkdownItAsync,
-  options: Options,
-  containerOptions?: ContainerOptions
+  options?: ContainerOptions
 ) => {
-  md.use(...createContainer('tip', containerOptions?.tipLabel || 'TIP', md))
-    .use(...createContainer('info', containerOptions?.infoLabel || 'INFO', md))
-    .use(
-      ...createContainer(
-        'warning',
-        containerOptions?.warningLabel || 'WARNING',
-        md
-      )
-    )
-    .use(
-      ...createContainer(
-        'danger',
-        containerOptions?.dangerLabel || 'DANGER',
-        md
-      )
-    )
-    .use(
-      ...createContainer(
-        'details',
-        containerOptions?.detailsLabel || 'Details',
-        md
-      )
-    )
+  md.use(...createContainer('tip', options?.tipLabel || 'TIP', md))
+    .use(...createContainer('info', options?.infoLabel || 'INFO', md))
+    .use(...createContainer('warning', options?.warningLabel || 'WARNING', md))
+    .use(...createContainer('danger', options?.dangerLabel || 'DANGER', md))
+    .use(...createContainer('details', options?.detailsLabel || 'Details', md))
     // explicitly escape Vue syntax
     .use(container, 'v-pre', {
       render: (tokens: Token[], idx: number) =>
@@ -46,7 +23,7 @@ export const containerPlugin = (
       render: (tokens: Token[], idx: number) =>
         tokens[idx].nesting === 1 ? `<div class="vp-raw">\n` : `</div>\n`
     })
-    .use(...createCodeGroup(options, md))
+    .use(...createCodeGroup(md))
 }
 
 type ContainerArgs = [typeof container, string, { render: RenderRule }]
@@ -80,7 +57,7 @@ function createContainer(
   ]
 }
 
-function createCodeGroup(options: Options, md: MarkdownItAsync): ContainerArgs {
+function createCodeGroup(md: MarkdownItAsync): ContainerArgs {
   return [
     container,
     'code-group',
@@ -118,7 +95,7 @@ function createCodeGroup(options: Options, md: MarkdownItAsync): ContainerArgs {
             }
           }
 
-          return `<div class="vp-code-group${getAdaptiveThemeMarker(options)}"><div class="tabs">${tabs}</div><div class="blocks">\n`
+          return `<div class="vp-code-group"><div class="tabs">${tabs}</div><div class="blocks">\n`
         }
         return `</div></div>\n`
       }

src/node/markdown/plugins/highlight.ts

@@ -80,19 +80,7 @@ export async function highlight(
       classActivePre: 'has-focused-lines'
     }),
     transformerNotationHighlight(),
-    transformerNotationErrorLevel(),
-    {
-      name: 'vitepress:add-class',
-      pre(node) {
-        this.addClassToHast(node, 'vp-code')
-      }
-    },
-    {
-      name: 'vitepress:clean-up',
-      pre(node) {
-        delete node.properties.style
-      }
-    }
+    transformerNotationErrorLevel()
   ]
 
   const vueRE = /-vue(?=:|$)/

src/node/markdown/plugins/preWrapper.ts

@@ -2,7 +2,6 @@ import type { MarkdownItAsync } from 'markdown-it-async'
 
 export interface Options {
   codeCopyButtonTitle: string
-  hasSingleTheme: boolean
 }
 
 export function preWrapperPlugin(md: MarkdownItAsync, options: Options) {
@@ -20,7 +19,7 @@ export function preWrapperPlugin(md: MarkdownItAsync, options: Options) {
     const lang = extractLang(token.info)
 
     return (
-      `<div class="language-${lang}${getAdaptiveThemeMarker(options)}${active}">` +
+      `<div class="language-${lang}${active}">` +
       `<button title="${options.codeCopyButtonTitle}" class="copy"></button>` +
       `<span class="lang">${lang}</span>` +
       fence(...args) +
@@ -29,10 +28,6 @@ export function preWrapperPlugin(md: MarkdownItAsync, options: Options) {
   }
 }
 
-export function getAdaptiveThemeMarker(options: Options) {
-  return options.hasSingleTheme ? '' : ' vp-adaptive-theme'
-}
-
 export function extractTitle(info: string, html = false) {
   if (html) {
     return (