From db58af5c66e563e7663084057a9853d8f2da984c Mon Sep 17 00:00:00 2001 From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com> Date: Thu, 27 Mar 2025 14:28:27 +0530 Subject: [PATCH] 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. --- .../styles/components/vp-code.css | 4 +- src/node/markdown/markdown.ts | 5 +-- src/node/markdown/plugins/containers.ts | 43 +++++-------------- src/node/markdown/plugins/highlight.ts | 14 +----- src/node/markdown/plugins/preWrapper.ts | 7 +-- 5 files changed, 16 insertions(+), 57 deletions(-) diff --git a/src/client/theme-default/styles/components/vp-code.css b/src/client/theme-default/styles/components/vp-code.css index 1ff9429b..5c42b9ca 100644 --- a/src/client/theme-default/styles/components/vp-code.css +++ b/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); } diff --git a/src/node/markdown/markdown.ts b/src/node/markdown/markdown.ts index bb56e0cf..7b006620 100644 --- a/src/node/markdown/markdown.ts +++ b/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, diff --git a/src/node/markdown/plugins/containers.ts b/src/node/markdown/plugins/containers.ts index a00b9a85..39efce17 100644 --- a/src/node/markdown/plugins/containers.ts +++ b/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 ? `
\n` : `
\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 `
${tabs}
\n` + return `
${tabs}
\n` } return `
\n` } diff --git a/src/node/markdown/plugins/highlight.ts b/src/node/markdown/plugins/highlight.ts index 52e5e84e..eef32b58 100644 --- a/src/node/markdown/plugins/highlight.ts +++ b/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(?=:|$)/ diff --git a/src/node/markdown/plugins/preWrapper.ts b/src/node/markdown/plugins/preWrapper.ts index bd6b96ba..e7d553b3 100644 --- a/src/node/markdown/plugins/preWrapper.ts +++ b/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 ( - `
` + + `
` + `` + `${lang}` + 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 (