diff --git a/docs/app/components/content/ComponentTheme.vue b/docs/app/components/content/ComponentTheme.vue
index ce05034c..e155beac 100644
--- a/docs/app/components/content/ComponentTheme.vue
+++ b/docs/app/components/content/ComponentTheme.vue
@@ -4,6 +4,7 @@ import { camelCase } from 'scule'
 import * as theme from '#build/ui'
 
 const route = useRoute()
+const { $prettier } = useNuxtApp()
 
 const name = camelCase(route.params.slug[route.params.slug.length - 1])
 
@@ -20,6 +21,14 @@ function stripCompoundVariants(component) {
         }
       }
 
+      if (compoundVariant.highlightColor) {
+        if (!['primary', 'gray'].includes(compoundVariant.highlightColor)) {
+          strippedCompoundVariants.value = true
+
+          return false
+        }
+      }
+
       return true
     })
   }
@@ -33,9 +42,14 @@ const component = computed(() => {
   return stripCompoundVariants(component)
 })
 
-const { data: ast } = await useAsyncData(`component-theme-${name}`, () => parseMarkdown(`
-\`\`\`yml
-${json5.stringify(component.value, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')}
+const { data: ast } = await useAsyncData(`component-theme-${name}`, async () => {
+  const md = `
+\`\`\`ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    ${name}: ${json5.stringify(component.value, null, 2)}
+  }
+})
 \`\`\`\
 
 ${strippedCompoundVariants.value
@@ -44,11 +58,21 @@ ${strippedCompoundVariants.value
 Some colors in \`compoundVariants\` are omitted for readability. Check out the source code on GitHub.
 ::`
 : ''}
+`
 
-::tip
-You can customize this component in your \`app.config.ts\` under \`ui.${name}\` key.
-::
-`))
+  let formatted = ''
+  try {
+    formatted = await $prettier.format(md, {
+      trailingComma: 'none',
+      semi: false,
+      singleQuote: true
+    })
+  } catch (e) {
+    formatted = md
+  }
+
+  return parseMarkdown(formatted)
+})
 </script>
 
 <template>
diff --git a/docs/app/components/content/IconsTheme.vue b/docs/app/components/content/IconsTheme.vue
index b9644440..2a6187ad 100644
--- a/docs/app/components/content/IconsTheme.vue
+++ b/docs/app/components/content/IconsTheme.vue
@@ -2,16 +2,32 @@
 import json5 from 'json5'
 
 const appConfig = useAppConfig()
+const { $prettier } = useNuxtApp()
 
-const { data: ast } = await useAsyncData(`icons-theme`, () => parseMarkdown(`
-\`\`\`yml
-${json5.stringify(appConfig.ui.icons, null, 2).replace(/,([ |\t\n]+[}|\])])/g, '$1')}
+const { data: ast } = await useAsyncData(`icons-theme`, async () => {
+  const md = `
+\`\`\`ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    icons: ${json5.stringify(appConfig.ui.icons, null, 2)}
+  }
+})
 \`\`\`\
+`
 
-::tip
-You can customize this component in your \`app.config.ts\` under \`ui.icons\` key.
-::
-`))
+  let formatted = ''
+  try {
+    formatted = await $prettier.format(md, {
+      trailingComma: 'none',
+      semi: false,
+      singleQuote: true
+    })
+  } catch (e) {
+    formatted = md
+  }
+
+  return parseMarkdown(formatted)
+})
 </script>
 
 <template>