vike-vue-content

基础 Markdown 语法、代码块、提示块，以及 comark 的 MDC 内联属性与组件语法。

编写 Markdown

vike-vue-content 的内容由 comark 解析。它兼容标准 Markdown，同时支持 MDC（MarkDown Components）扩展语法——让你在 Markdown 里附加属性、嵌入 Vue 组件。

基础语法

标准 Markdown 语法都可直接使用：

# 一级标题
## 二级标题

**粗体**、*斜体*、`行内代码`、~~删除线~~。

- 无序列表
- 列表项
  - 嵌套项

1. 有序列表
2. 第二项

> 引用块

[链接](https://vike.dev)
![图片](/logo.svg)

| 表头 | 表头 |
| --- | --- |
| 单元格 | 单元格 |

标题会被自动收集进页面目录（TOC），并生成锚点 id。

代码块

用三个反引号包裹代码，并标注语言以启用语法高亮：

const msg: string = 'hello'
```ts
const msg: string = 'hello'
```

提示块

支持 GitHub 风格的提示语法：

一条提示信息。
一条警告信息。
> [!NOTE]
> 一条提示信息。

> [!WARNING]
> 一条警告信息。

MDC 内联属性

在元素后用 {...} 附加属性，可作用于链接、行内代码、强调文本等：

强调链接

code

一段文本

[强调链接](https://vike.dev){.text-primary target="_self"}

`code`{.highlight}

[一段文本]{#my-anchor .note}

语法约定：

  • {.class-name} —— 添加 class
  • {#id-name} —— 添加 id
  • {key="value"} —— 添加任意属性

最常见的用法是控制链接的打开方式，详见 文档组件 · Link。

Mermaid 图表

```mermaid
graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> A
```

MDC 组件

用 :: 语法在 Markdown 里嵌入 Vue 组件。

块组件（成对的 ::）：

::alert{type="warning"}
这是写在组件默认插槽里的内容。
::

行内组件（:name[内容]{属性}）：

这是一个 New 徽章。

这是一个 :badge[New]{.text-red} 徽章。

组件名会映射到你通过 ContentRenderer 的 components 映射注册的 Vue 组件，参见 文档组件 · ContentRenderer。

下一步