diff --git a/docs/components/content/ComponentCard.vue b/docs/components/content/ComponentCard.vue
index e462c56525..dda7a1b52b 100644
--- a/docs/components/content/ComponentCard.vue
+++ b/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>
diff --git a/docs/components/content/ComponentExample.vue b/docs/components/content/ComponentExample.vue
index f4e7bb96c9..c7827315a3 100644
--- a/docs/components/content/ComponentExample.vue
+++ b/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>
diff --git a/docs/components/content/ComponentPreset.vue b/docs/components/content/ComponentPreset.vue
index 9a4038eebb..5362c39a3d 100644
--- a/docs/components/content/ComponentPreset.vue
+++ b/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,7 +15,6 @@ 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)
@@ -25,20 +22,9 @@ 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>
diff --git a/docs/composables/useShikiHighlighter.ts b/docs/composables/useShikiHighlighter.ts
deleted file mode 100644
index 4bd48c367d..0000000000
--- a/docs/composables/useShikiHighlighter.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { createShikiHighlighter } from '@nuxtjs/mdc/runtime/highlighter/shiki'
-import MaterialTheme from 'shiki/themes/material-theme.mjs'
-import MaterialThemeLighter from 'shiki/themes/material-theme-lighter.mjs'
-import MaterialThemePalenight from 'shiki/themes/material-theme-palenight.mjs'
-import HtmlLang from 'shiki/langs/html.mjs'
-import MdcLang from 'shiki/langs/mdc.mjs'
-import VueLang from 'shiki/langs/vue.mjs'
-import YamlLang from 'shiki/langs/yaml.mjs'
-import PostcssLang from 'shiki/langs/postcss.mjs'
-
-let highlighter
-export const useShikiHighlighter = () => {
-  if (!highlighter) {
-    highlighter = createShikiHighlighter({
-      bundledThemes: {
-        'material-theme': MaterialTheme,
-        'material-theme-lighter': MaterialThemeLighter,
-        'material-theme-palenight': MaterialThemePalenight
-      },
-      bundledLangs: {
-        html: HtmlLang,
-        mdc: MdcLang,
-        vue: VueLang,
-        yml: YamlLang,
-        postcss: PostcssLang
-      }
-    })
-  }
-
-  return highlighter
-}