84 lines
1.7 KiB
Markdown
84 lines
1.7 KiB
Markdown
---
|
||
title: Markdown
|
||
description: 如何使用MDC语法编写文档。
|
||
navigation:
|
||
icon: lucide:arrow-big-down
|
||
|
||
---
|
||
|
||
::card-group
|
||
::card
|
||
---
|
||
title: MDC语法
|
||
to: https://content.nuxt.com/docs/files/markdown#mdc-syntax
|
||
target: _blank
|
||
icon: lucide:arrow-big-down
|
||
---
|
||
在**Nuxt Content**文档中阅读详细的MDC使用指南。
|
||
::
|
||
|
||
::card
|
||
---
|
||
title: 组件
|
||
to: /components/prose
|
||
icon: lucide:box
|
||
---
|
||
查看**shadcn-docs-nuxt**提供的MDC组件。
|
||
::
|
||
::
|
||
|
||
## VS Code集成
|
||
|
||
### MDC扩展
|
||
|
||
[Nuxt MDC](https://marketplace.visualstudio.com/items?itemName=Nuxt.mdc)是一个VS Code扩展，为MDC语法提供语法高亮和自动完成功能。
|
||
|
||
启动VS Code快速打开 :shortcut{value="Ctrl"} + :shortcut{value="P"}，粘贴以下命令，然后按回车。
|
||
|
||
```bash [shell]
|
||
ext install Nuxt.mdc
|
||
```
|
||
|
||
### 启用组件元数据自动完成
|
||
|
||
::alert
|
||
需要 `Nuxt.mdc >= 0.3.1`
|
||
::
|
||
|
||
::steps{:level="4"}
|
||
#### VSCode设置
|
||
|
||
```json [.vscode/settings.json] line-numbers
|
||
{
|
||
"mdc.enableComponentMetadataCompletions": true // [!code ++]
|
||
}
|
||
```
|
||
|
||
#### 安装 `nuxt-component-meta` 模块
|
||
|
||
将nuxt-component-meta依赖添加到您的项目中：
|
||
|
||
:pm-install{name="nuxt-component-meta"}
|
||
|
||
将nuxt-component-meta添加到nuxt.config.ts的modules部分，并可选择配置模块：
|
||
|
||
```ts [nuxt.config.ts]
|
||
export default defineNuxtConfig({
|
||
modules: ['nuxt-component-meta'],
|
||
});
|
||
```
|
||
|
||
一旦您的项目构建完成或在开发服务器上运行，扩展将自动扫描您的项目以获取组件元数据，并根据发现的组件提供建议，无需额外配置。
|
||
::
|
||
|
||
## 技巧
|
||
|
||
### 从目录中隐藏标题
|
||
:badge[0.4.7]{variant="outline"}
|
||
|
||
将标题的 `id` 设置为 `hide-toc` 将从目录中隐藏该标题。
|
||
|
||
```mdc
|
||
:h2[脚注]{id="hide-toc"}
|
||
```
|