docs: highlight inline type code in props table

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>

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 }}

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 }}

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>