Markdown 组件

View source
探索如何利用 Nuxt UI 提供的 Prose 组件(如 Accordion、Badge 和 Callout)来组织和丰富您的 Markdown 内容。

Prose 组件是标准 HTML 排版标签的替代品,它们提供了一种在使用 Markdown 时轻松自定义 UI 的方法。

Movk Nuxt Docs 和 Nuxt UI 提供了一套设计精美的 Prose 组件,帮助您使用 MDC 语法 编写出色的文档。

本页仅重点介绍最适合编写文档的 Prose 组件。然而,您可以在 Markdown 中使用任何 Nuxt UI 组件。有关可用组件的完整列表,请参阅 Nuxt UI 官方文档。

Accordion

使用 accordionaccordion-item 组件在您的内容中嵌入一个 Accordion

Badge

badge 组件的默认插槽中使用 Markdown,在您的内容中显示一个 Badge

v3.0.0

Callout

callout 组件的默认插槽中使用 Markdown,为您的内容添加引人注目的上下文信息。

使用 iconcolor 属性来自定义其外观。您还可以传递 <NuxtLink> 组件的任何属性。

此外,您可以使用具有预定义图标和颜色的 notetipwarningcaution 快捷方式。

这是一些额外的信息。
这是一个有帮助的建议。
请小心此操作,因为它可能产生意外结果。
此操作无法撤销。

CardCardGroup

card 组件的默认插槽中使用 Markdown 来突出显示您的内容。

使用 titleiconcolor 属性来自定义它。您还可以传递 <NuxtLink> 中的任何属性。

使用 card-group 组件包装您的 card 组件,将它们分组在一起以获得网格布局。

Dashboard

一个多列布局的仪表板。

SaaS

具有登陆页面、定价、文档和博客的模板。

Docs

一个带有 @nuxt/content 的文档。

Landing

一个可用作起点的登陆页面。

Collapsible

使用 collapsible 组件包装您的内容以在内容中显示 Collapsible

FieldFieldGroup

field 是一个在内容中显示的属性或参数。您可以通过 field-group 将它们分组在列表中。

analytics
boolean
Default to false - Enables analytics for your project (coming soon).
blob
boolean
Default to false - Enables blob storage to store static assets, such as images, videos and more.
cache
boolean
Default to false - Enables cache storage to cache your server route responses or functions using Nitro's cachedEventHandler and cachedFunction
database
boolean
Default to false - Enables SQL database to store your application's data.

Icon

使用 icon 组件在内容中显示 Icon

:icon{name="i-simple-icons-nuxtdotjs"}

Kbd

使用 kbd 组件在内容中显示 Kbd

:kbd{value="meta"} :kbd{value="K"}

Tabs

使用 tabstabs-item 组件在内容中显示 Tabs

::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::
::tabs{.w-full}
  :::tabs-item{icon="i-lucide-code" label="Code"}
    ```mdc
    ::::callout
    Lorem velit voluptate ex reprehenderit ullamco et culpa.
    ::::
    ```
  ::::

  :::tabs-item{icon="i-lucide-eye" label="Preview"}
    :::::callout
    Lorem velit voluptate ex reprehenderit ullamco et culpa.
    :::::
  :::
::

Steps

用 Steps 组件包装您的标题以显示步骤列表。

使用 level 属性来定义哪个标题将用于步骤。

Start a fresh new project

Terminal
npx nuxi init -t gh:mhaibaraai/movk-nuxt-docs/template

Run your dev server

Terminal
pnpm run dev
Copyright © 2024 - 2025