From 1d61d8d152a76215e3ee1a043796abab83997012 Mon Sep 17 00:00:00 2001
From: Anthony Fu <github@antfu.me>
Date: Thu, 27 Jun 2024 16:28:11 +0200
Subject: [PATCH] docs: highlight inline type code in props table

---
 .../components/content/ComponentEvents.vue    |  4 +---
 .../app/components/content/ComponentProps.vue |  8 ++-----
 .../app/components/content/ComponentSlots.vue |  4 +---
 .../content/HighlightInlineType.vue           | 24 +++++++++++++++++++
 4 files changed, 28 insertions(+), 12 deletions(-)
 create mode 100644 docs/app/components/content/HighlightInlineType.vue

diff --git a/docs/app/components/content/ComponentEvents.vue b/docs/app/components/content/ComponentEvents.vue
index cccaba46..5ad17919 100644
--- a/docs/app/components/content/ComponentEvents.vue
+++ b/docs/app/components/content/ComponentEvents.vue
@@ -32,9 +32,7 @@ const meta: ComputedRef<ComponentMeta> = computed(() => componentMeta.value.meta
           </ProseCodeInline>
         </ProseTd>
         <ProseTd>
-          <ProseCodeInline v-if="event.type" lang="ts">
-            {{ event.type }}
-          </ProseCodeInline>
+          <HighlightInlineType v-if="event.type" :type="event.type" />
         </ProseTd>
       </ProseTr>
     </ProseTbody>
diff --git a/docs/app/components/content/ComponentProps.vue b/docs/app/components/content/ComponentProps.vue
index 5b038f97..c604361e 100644
--- a/docs/app/components/content/ComponentProps.vue
+++ b/docs/app/components/content/ComponentProps.vue
@@ -50,14 +50,10 @@ console.log('meta.value', meta.value)
           </ProseCodeInline>
         </ProseTd>
         <ProseTd>
-          <ProseCodeInline v-if="prop.default">
-            {{ prop.default }}
-          </ProseCodeInline>
+          <HighlightInlineType v-if="prop.default" :type="prop.default" />
         </ProseTd>
         <ProseTd>
-          <ProseCodeInline v-if="prop.type" lang="ts">
-            {{ prop.type }}
-          </ProseCodeInline>
+          <HighlightInlineType v-if="prop.type" :type="prop.type" />
 
           <ProseP class="mt-1 mb-0 text-gray-500 dark:text-gray-400">
             {{ prop.description }}
diff --git a/docs/app/components/content/ComponentSlots.vue b/docs/app/components/content/ComponentSlots.vue
index 6dbe38b6..610604e4 100644
--- a/docs/app/components/content/ComponentSlots.vue
+++ b/docs/app/components/content/ComponentSlots.vue
@@ -32,9 +32,7 @@ const meta: ComputedRef<ComponentMeta> = computed(() => componentMeta.value.meta
           </ProseCodeInline>
         </ProseTd>
         <ProseTd>
-          <ProseCodeInline v-if="slot.type" lang="ts">
-            {{ slot.type }}
-          </ProseCodeInline>
+          <HighlightInlineType v-if="slot.type" :type="slot.type" />
 
           <ProseP class="mt-1 mb-0 text-gray-500 dark:text-gray-400">
             {{ slot.description }}
diff --git a/docs/app/components/content/HighlightInlineType.vue b/docs/app/components/content/HighlightInlineType.vue
new file mode 100644
index 00000000..f87a5593
--- /dev/null
+++ b/docs/app/components/content/HighlightInlineType.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { parseMarkdown } from '@nuxtjs/mdc/runtime'
+
+const props = defineProps<{
+  type: string
+}>()
+
+const { data: ast } = await useAsyncData<any>(`hightlight-inline-code-` + props.type, async () => {
+  const ast = await parseMarkdown(`\`type _ = ${props.type}\`{lang="ts"}`)
+
+  const p = ast.body.children[0]
+  const code = p.children[0]
+
+  // Remove the `type _ = ` part
+  code.children = code.children.slice(3)
+  ast.body.children = [code]
+
+  return ast
+})
+</script>
+
+<template>
+  <MDCRenderer v-if="ast" :body="ast.body" :data="ast.data" />
+</template>