arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-29 19:30:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

13
docs/components/content/ComponentCard.vue
View File

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

2
docs/components/content/ComponentExample.vue
View File

@@ -1,5 +1,5 @@
<template> <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]"> <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" /> <ContentSlot v-if="$slots.default" :use="$slots.default" />
</div> </div>