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

Co-authored-by: Benjamin Canac <[email protected]>
nuxt · Sep 28, 2023 · 8b7a013 · 8b7a013 · vercel · Sep 28, 2023
1 parent 3e647e4
commit 8b7a013
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 12 deletions.
diff --git 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
@@ -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>