docs: improve config display

docs/components/content/ComponentCard.vue

@@ -122,6 +122,7 @@ 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]))}`
 
@@ -267,8 +268,6 @@ function renderObject (obj: any) {
   return obj
 }
 
-const highlighter = useShikiHighlighter()
-
 const { data: ast } = await useAsyncData(
   `${name}-ast-${JSON.stringify({ props: componentProps, slots: props.slots, code: props.code })}`,
   async () => {

docs/components/content/ComponentExample.vue

@@ -24,7 +24,6 @@ import { fetchContentExampleCode } from '~/composables/useContentExamplesCode'
 import { transformContent } from '@nuxt/content/transformers'
 import { useShikiHighlighter } from '~/composables/useShikiHighlighter'
 
-
 const props = defineProps({
   component: {
     type: String,
@@ -77,10 +76,10 @@ 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 highlighter = useShikiHighlighter()
 const { data: ast } = await useAsyncData(`content-example-${camelName}-ast`, () => transformContent('content:_markdown.md', `\`\`\`vue\n${data?.code ?? ''}\n\`\`\``, {
   markdown: {
     highlight: {

docs/components/content/ComponentPreset.vue

@@ -5,6 +5,8 @@
 <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({
@@ -15,6 +17,7 @@ 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)
@@ -23,15 +26,18 @@ const name = `U${upperFirst(camelName)}`
 const preset = config[camelName]
 
 const { data: ast } = await useAsyncData(`${name}-preset`, () => transformContent('content:_markdown.md', `
-\`\`\`json
-${JSON.stringify(preset, null, 2)}
+\`\`\`yml
+${json5.stringify(preset, null, 2)}
 \`\`\`\
 `, {
-  highlight: {
-    theme: {
-      light: 'material-theme-lighter',
-      default: 'material-theme',
-      dark: 'material-theme-palenight'
+  markdown: {
+    highlight: {
+      highlighter,
+      theme: {
+        light: 'material-theme-lighter',
+        default: 'material-theme',
+        dark: 'material-theme-palenight'
+      }
     }
   }
 }))

docs/composables/useShikiHighlighter.ts

@@ -5,6 +5,7 @@ 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'
 
 let highlighter
 export const useShikiHighlighter = () => {
@@ -18,10 +19,11 @@ export const useShikiHighlighter = () => {
       bundledLangs: {
         html: HtmlLang,
         mdc: MdcLang,
-        vue: VueLang
+        vue: VueLang,
+        yml: YamlLang
       }
     })
   }
 
   return highlighter
-}
+}