estel_docs/content/docs/1.简单文档/5.components/1.API.md

title, description, navigation

title	description	navigation
常用组件	常用自定义组件速查文档	icon lucide-component

:::code-group

      ::callout
      ---
      icon: simple-icons-visualstudiocode
      to: https://marketplace.visualstudio.com/items?itemName=Nuxt.mdc
      ---
      安装 **MDC VS Code 扩展**，以获得对 MDC 语法的高亮显示支持。
      ::     

::::code-preview{icon="i-lucide-eye" label="Preview"} ::callout --- icon: simple-icons-visualstudiocode to: https://marketplace.visualstudio.com/items?itemName=Nuxt.mdc --- 安装 MDC VS Code 扩展，以获得对 MDC 语法的高亮显示支持。 :: :::: :::

::tip 在 tip 标签中嵌套 code-group 的示例. 可以直接复制index.md 中的内容,既是 当前展示 的效果.

:::code-group

          ::tip
          在文档中使用自定义组件时，可以在插槽中使用 Markdown 语法，组件会自动渲染 Markdown 内容。

            :::code-group
            ```mdc [index.md]
            ::my-title
            A [rich text](/) will be **rendered** by the component.
            ::
            ```
            
            ```html [MyTitle.vue]
            <template>
              <h1 class="text-4xl">
                <slot mdc-unwrap="p" />
              </h1>
            </template>
            ```

              ::::code-preview{icon="i-lucide-eye" label="Preview"}
                :::::example-title
                A [rich text](/) will be **rendered** by the component.
                :::::
              ::::
            :::
          ::

<template>
  <h1 class="text-4xl">
    <slot mdc-unwrap="p" />
  </h1>
</template>

::::code-preview{icon="i-lucide-eye" label="Preview"}
  :::::example-title
  A [rich text](/) will be **rendered** by the component.
  :::::
::::

::: ::