From 8b7a013319ce8763d9428a5ff7986a5b2b8ed3fb Mon Sep 17 00:00:00 2001
From: KeJun <kejun1997@gmail.com>
Date: Thu, 28 Sep 2023 17:28:43 +0800
Subject: [PATCH] docs(ComponentCard): fix inline highlighter (#750)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 docs/components/content/ComponentCard.vue    | 13 ++-----------
 docs/components/content/ComponentExample.vue |  2 +-
 2 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/docs/components/content/ComponentCard.vue b/docs/components/content/ComponentCard.vue
index a79ab567..0a6cd2b8 100644
--- a/docs/components/content/ComponentCard.vue
+++ b/docs/components/content/ComponentCard.vue
@@ -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: {
diff --git a/docs/components/content/ComponentExample.vue b/docs/components/content/ComponentExample.vue
index 85f78ec0..60ade366 100644
--- a/docs/components/content/ComponentExample.vue
+++ b/docs/components/content/ComponentExample.vue
@@ -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>