romhml · romhml · Jul 15, 2026 · Jul 15, 2026
diff --git a/packages/devtools/app/components/ComponentPropInput.vue b/packages/devtools/app/components/ComponentPropInput.vue
@@ -10,6 +10,7 @@ import PrimitiveArrayInput from '../components/inputs/PrimitiveArrayInput.vue'
 import DateInput from '../components/inputs/DateInput.vue'
 import IconInput from '../components/inputs/IconInput.vue'
 import { createReusableTemplate } from '@vueuse/core'
+import security from '@comark/nuxt/plugins/security'
 
 const inputTypes: Record<PropInputType, Component> = {
   icon: IconInput,
@@ -62,10 +63,6 @@ function clearValue() {
   modelValue.value = undefined
 }
 
-const description = computed(() => {
-  return props.description?.replace(/`([^`]+)`/g, '<code class="text-xs font-medium bg-elevated px-1 py-0.5 rounded">$1</code>')
-})
-
 const isArray = computed(() => currentInput.value?.inputType === 'array')
 
 const [DefineSelect, ReuseSelect] = createReusableTemplate()
@@ -123,11 +120,12 @@ const [DefineDescription, ReuseDescription] = createReusableTemplate()
       <span v-else />
     </DefineLabel>
     <DefineDescription>
-      <!-- eslint-disable vue/no-v-html -->
-      <p
+      <Comark
         v-if="description"
-        class="text-muted text-sm"
-        v-html="description"
+        class="description-markdown text-muted text-sm min-w-0"
+        :markdown="description"
+        :options="{ html: false }"
+        :plugins="[security()]"
       />
     </DefineDescription>
 
@@ -179,3 +177,30 @@ const [DefineDescription, ReuseDescription] = createReusableTemplate()
     </template>
   </div>
 </template>
+
+<style scoped>
+.description-markdown :deep(> :first-child) {
+  margin-top: 0;
+}
+
+.description-markdown :deep(> :last-child) {
+  margin-bottom: 0;
+}
+
+.description-markdown :deep(p),
+.description-markdown :deep(ul),
+.description-markdown :deep(ol),
+.description-markdown :deep(pre),
+.description-markdown :deep(blockquote) {
+  margin-block: 0.375rem;
+}
+
+.description-markdown :deep(ul),
+.description-markdown :deep(ol) {
+  padding-inline-start: 1.25rem;
+}
+
+.description-markdown :deep(li + li) {
+  margin-top: 0.125rem;
+}
+</style>
diff --git a/packages/devtools/nuxt.config.ts b/packages/devtools/nuxt.config.ts
@@ -1,7 +1,7 @@
 import { resolve } from 'pathe'
 
 export default defineNuxtConfig({
-  modules: ['@nuxt/ui'],
+  modules: ['@comark/nuxt', '@nuxt/ui'],
   ssr: false,
 
   components: {

diff --git a/packages/devtools/package.json b/packages/devtools/package.json
@@ -9,6 +9,7 @@
     "generate": "nuxt generate"
   },
   "dependencies": {
+    "@comark/nuxt": "0.5.1",
     "@nuxt/ui": "catalog:",
     "@vueuse/core": "^14.3.0",
     "@vueuse/integrations": "^14.3.0",

diff --git a/packages/nuxt/test/basic.nuxt.test.ts b/packages/nuxt/test/basic.nuxt.test.ts
@@ -81,7 +81,7 @@ describe('basic', async () => {
       expect(component).toEqual(expect.objectContaining({
         props: [
           {
-            description: '',
+            description: 'Configures the **primary** label.\n\n- Supports `inline code`\n- See [the guide](https://example.com/docs).',
             global: false,
             name: 'foo',
             required: true,

diff --git a/packages/nuxt/test/fixtures/basic/app/types/props.ts b/packages/nuxt/test/fixtures/basic/app/types/props.ts
@@ -1,3 +1,9 @@
 export type BasicComponentProps = {
+  /**
+   * Configures the **primary** label.
+   *
+   * - Supports `inline code`
+   * - See [the guide](https://example.com/docs).
+   */
   foo: string
 }