markdown/1.API.md at main

estel/markdown

Fork 0

Files

estel c9574a02de 初次提交旧的文档与blog

2025-08-08 10:01:03 +08:00

2.0 KiB

Raw Permalink Blame History

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.
  :::::
::::

::: ::

2.0 KiB Raw Permalink Blame History

2.0 KiB

Raw Permalink Blame History