docs(ComponentCard): fix inline highlighter (#750)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
KeJun
2023-09-28 17:28:43 +08:00
committed by GitHub
parent 3e647e4af1
commit 8b7a013319
2 changed files with 3 additions and 12 deletions

View File

@@ -46,7 +46,7 @@
</component>
</div>
<ContentRenderer v-if="!previewOnly" :value="ast" class="[&>pre]:!rounded-t-none" />
<ContentRenderer v-if="!previewOnly" :value="ast" class="[&>div>pre]:!rounded-t-none" />
</div>
</template>
@@ -209,16 +209,7 @@ function renderObject (obj: any) {
}
const shikiHighlighter = useShikiHighlighter({})
const codeHighlighter = async (code: string, lang: string, theme: any, highlights: any) => {
const styleMap = {}
const { tree, className } = await shikiHighlighter.getHighlightedAST(code, lang, theme, { styleMap, highlights })
return {
tree,
className,
style: shikiHighlighter.generateStyles(styleMap),
styleMap
}
}
const codeHighlighter = async (code: string, lang: string, theme: any, highlights: number[]) => shikiHighlighter.getHighlightedAST(code, lang, theme, { highlights })
const { data: ast } = await useAsyncData(`${name}-ast-${JSON.stringify({ props: componentProps, slots: props.slots })}`, () => transformContent('content:_markdown.md', code.value, {
markdown: {
highlight: {

View File

@@ -1,5 +1,5 @@
<template>
<div class="[&>pre]:!rounded-t-none">
<div class="[&>div>pre]:!rounded-t-none">
<div class="flex border border-gray-200 dark:border-gray-700 relative not-prose rounded-t-md" :class="[{ 'p-4': padding, 'rounded-b-md': !$slots.code, 'border-b-0': !!$slots.code }, backgroundClass, overflowClass]">
<ContentSlot v-if="$slots.default" :use="$slots.default" />
</div>