Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix: properly apply dark/light classes in code blocks (#1546)
  • Loading branch information
brc-dd committed Oct 27, 2022
1 parent d9fc0b2 commit 178895f
Showing 1 changed file with 16 additions and 24 deletions.
40 changes: 16 additions & 24 deletions src/node/markdown/plugins/highlight.ts
Expand Up @@ -6,7 +6,6 @@ import {
createRangeProcessor,
getHighlighter,
Processor,
addClass,
defineProcessor
} from 'shiki-processor'
import type { ThemeOptions } from '../markdown'
Expand Down Expand Up @@ -69,7 +68,8 @@ export async function highlight(
processors
})

const styleRE = /<pre .* (style=".*")><code>/
const classRE = /<pre[^>]*class="(.*?)"/
const styleRE = /<pre[^>]*(style=".*?")/
const preRE = /^<pre(.*?)>/
const vueRE = /-vue$/

Expand All @@ -93,29 +93,21 @@ export async function highlight(
)
}

const dark = addClass(
cleanup(
highlighter.codeToHtml(str, {
lang,
lineOptions,
theme: getThemeName(theme.dark)
})
),
'vp-code-dark',
'pre'
)
const dark = cleanup(
highlighter.codeToHtml(str, {
lang,
lineOptions,
theme: getThemeName(theme.dark)
})
).replace(classRE, (_, cls) => _.replace(cls, 'vp-code-dark'))

const light = addClass(
cleanup(
highlighter.codeToHtml(str, {
lang,
lineOptions,
theme: getThemeName(theme.light)
})
),
'vp-code-light',
'pre'
)
const light = cleanup(
highlighter.codeToHtml(str, {
lang,
lineOptions,
theme: getThemeName(theme.light)
})
).replace(classRE, (_, cls) => _.replace(cls, 'vp-code-light'))

return dark + light
}
Expand Down

0 comments on commit 178895f

Please sign in to comment.