docs: use parseMarkdown instead of transformContent

docs/components/content/ComponentCard.vue

@@ -51,9 +51,7 @@
 </template>
 
 <script setup lang="ts">
-import { transformContent } from '@nuxt/content/transformers'
 import { upperFirst, camelCase, kebabCase } from 'scule'
-import { useShikiHighlighter } from '~/composables/useShikiHighlighter'
 
 // eslint-disable-next-line vue/no-dupe-keys
 const props = defineProps({
@@ -122,7 +120,6 @@ const componentProps = reactive({ ...props.props })
 const { $prettier } = useNuxtApp()
 const appConfig = useAppConfig()
 const route = useRoute()
-const highlighter = useShikiHighlighter()
 
 let name = props.slug || `U${upperFirst(camelCase(route.params.slug[route.params.slug.length - 1]))}`
 
@@ -270,27 +267,18 @@ function renderObject (obj: any) {
   return obj
 }
 
-const { data: ast } = await useAsyncData(
-  `${name}-ast-${JSON.stringify({ props: componentProps, slots: props.slots, code: props.code })}`,
-  async () => {
-    let formatted = ''
-    try {
-      formatted = await $prettier.format(code.value) || code.value
-    } catch (error) {
-      formatted = code.value
-    }
-
-    return transformContent('content:_markdown.md', formatted, {
-      markdown: {
-        highlight: {
-          highlighter,
-          theme: {
-            light: 'material-theme-lighter',
-            default: 'material-theme',
-            dark: 'material-theme-palenight'
-          }
-        }
-      }
+const { data: ast } = await useAsyncData(`${name}-ast-${JSON.stringify({ props: componentProps, slots: props.slots, code: props.code })}`, async () => {
+  let formatted = ''
+  try {
+    formatted = await $prettier.format(code.value, {
+      trailingComma: 'none',
+      semi: false,
+      singleQuote: true
     })
-  }, { watch: [code] })
+  } catch {
+    formatted = code.value
+  }
+
+  return parseMarkdown(formatted)
+}, { watch: [code] })
 </script>

docs/components/content/ComponentExample.vue

@@ -22,8 +22,6 @@
 <script setup lang="ts">
 import { camelCase } from 'scule'
 import { fetchContentExampleCode } from '~/composables/useContentExamplesCode'
-import { transformContent } from '@nuxt/content/transformers'
-import { useShikiHighlighter } from '~/composables/useShikiHighlighter'
 
 const props = defineProps({
   component: {
@@ -81,21 +79,9 @@ if (['command-palette-theme-algolia', 'command-palette-theme-raycast', 'vertical
 const instance = getCurrentInstance()
 const camelName = camelCase(component)
 const data = await fetchContentExampleCode(camelName)
-const highlighter = useShikiHighlighter()
 
 const hasCode = computed(() => !props.hiddenCode && (data?.code || instance.slots.code))
 const hasPreview = computed(() => !props.hiddenPreview && (props.component || instance.slots.default))
 
-const { data: ast } = await useAsyncData(`content-example-${camelName}-ast`, () => transformContent('content:_markdown.md', `\`\`\`vue\n${data?.code ?? ''}\n\`\`\``, {
-  markdown: {
-    highlight: {
-      highlighter,
-      theme: {
-        light: 'material-theme-lighter',
-        default: 'material-theme',
-        dark: 'material-theme-palenight'
-      }
-    }
-  }
-}))
+const { data: ast } = await useAsyncData(`content-example-${camelName}-ast`, () => parseMarkdown(`\`\`\`vue\n${data?.code ?? ''}\n\`\`\``))
 </script>

docs/components/content/ComponentPreset.vue

@@ -3,10 +3,8 @@
 </template>
 
 <script setup lang="ts">
-import { transformContent } from '@nuxt/content/transformers'
 import { upperFirst, camelCase } from 'scule'
 import json5 from 'json5'
-import { useShikiHighlighter } from '~/composables/useShikiHighlighter'
 import * as config from '#ui/ui.config'
 
 const props = defineProps({
@@ -17,28 +15,16 @@ const props = defineProps({
 })
 
 const route = useRoute()
-const highlighter = useShikiHighlighter()
 // eslint-disable-next-line vue/no-dupe-keys
 const slug = props.slug || route.params.slug[route.params.slug.length - 1]
 const camelName = camelCase(slug)
 const name = `U${upperFirst(camelName)}`
 
 const preset = config[camelName]
 
-const { data: ast } = await useAsyncData(`${name}-preset`, () => transformContent('content:_markdown.md', `
+const { data: ast } = await useAsyncData(`${name}-preset`, () => parseMarkdown(`
 \`\`\`yml
-${json5.stringify(preset, null, 2)}
+${json5.stringify(preset, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')}
 \`\`\`\
-`, {
-  markdown: {
-    highlight: {
-      highlighter,
-      theme: {
-        light: 'material-theme-lighter',
-        default: 'material-theme',
-        dark: 'material-theme-palenight'
-      }
-    }
-  }
-}))
+`))
 </script>