---
title: "Markdown 语法"
description: "掌握在 Movk Nuxt Docs 中使用标准 Markdown 语法进行文本格式化，包括标题层级、粗体/斜体、有序与无序列表、行内代码、超链接和图片，构建结构清晰、层次分明的技术文档内容。"
seo_title: "Markdown Syntax"
seo_description: "Learn standard Markdown syntax in Movk Nuxt Docs for headings, emphasis, lists, inline code, links, images, and structured technical writing."
canonical_url: "https://docs.mhaibaraai.cn/docs/typography/markdown-syntax"
---
# Markdown 语法

> 掌握在 Movk Nuxt Docs 中使用标准 Markdown 语法进行文本格式化，包括标题层级、粗体/斜体、有序与无序列表、行内代码、超链接和图片，构建结构清晰、层次分明的技术文档内容。

## 标题

使用标题来组织文档的主要部分，这有助于用户更好地导航和理解内容。

```vue
<template>
  <h2 id=标题-1>
  标题</h2>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=## 标题
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  ## </span>
  <span class=sBMFI>
  标题
  </span></span></code></pre></template>
</template>
```

### 副标题

使用副标题进一步细分内容，创建更清晰的层次结构，提高可读性。

```vue
<template>
  <h3 id=副标题-1>
  副标题</h3>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=### 副标题
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  ### </span>
  <span class=sBMFI>
  副标题
  </span></span></code></pre></template>
</template>
```

> \[\!TIP\]
> 
> 每个标题和副标题都会自动生成一个锚点，并显示在页面的目录中。

## 文本格式化

Movk Nuxt Docs 支持大多数标准的 Markdown 文本格式化选项。

| 样式  | 语法        | 效果      |
| --- | --------- | ------- |
| 粗体  | `**粗体**`  | **粗体**  |
| 斜体  | `*斜体*`    | *斜体*    |
| 删除线 | `~~删除线~~` | ~~删除线~~ |

您可以组合使用这些格式，以实现更丰富的文本样式和视觉强调。

| 样式    | 语法           | 效果         |
| ----- | ------------ | ---------- |
| 粗斜体   | `***粗斜体***`  | ***粗斜体***  |
| 粗体删除线 | `~~**粗体**~~` | ~~**粗体**~~ |
| 斜体删除线 | `~~*斜体*~~`   | ~~*斜体*~~   |

## 链接

链接用于连接文档的不同部分或指向外部资源，对于用户导航和提供参考至关重要。要创建链接，请将链接文本包裹在方括号 `[]` 中，后跟圆括号 `()` 内的 URL。

```vue
<template>
  <a href=https://ui.nuxt.com/getting-started/installation/nuxt>
  Nuxt UI</a>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=[Nuxt UI](https://ui.nuxt.com/getting-started/installation/nuxt)
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  [</span>
  <span class=sfazB>
  Nuxt UI</span>
  <span class=sMK4o>
  ](</span>
  <span class=sQLHv>
  https://ui.nuxt.com/getting-started/installation/nuxt</span>
  <span class=sMK4o>
  )
  </span></span></code></pre></template>
</template>
```

### 内部链接

要在文档内部创建链接，请使用相对于根目录的路径，例如 `/docs/getting-started/installation`。

```vue
<template>
  <a href=/docs/getting-started/installation>
  安装</a>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=[安装](/docs/getting-started/installation)
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  [</span>
  <span class=sfazB>
  安装</span>
  <span class=sMK4o>
  ](</span>
  <span class=sQLHv>
  /docs/getting-started/installation</span>
  <span class=sMK4o>
  )
  </span></span></code></pre></template>
</template>
```

## 列表

列表以结构化、易于阅读的格式组织相关项目。Markdown 支持无序列表、有序列表和嵌套列表，以满足不同的内容需求。

### 无序列表

对于没有特定顺序的项目，请使用无序列表。每个列表项以 `-` 符号开头。

```vue
<template>
  <ul>
  <li>
  我是列表项目。</li>
  <li>
  我是另一个列表项目。</li>
  <li>
  我是最后一个列表项目。</li></ul>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=- 我是列表项目。
  - 我是另一个列表项目。
  - 我是最后一个列表项目。
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  -</span>
  <span class=sTEyZ>
   我是列表项目。
  </span></span>
  <span class=line>
  <span class=sMK4o>
  -</span>
  <span class=sTEyZ>
   我是另一个列表项目。
  </span></span>
  <span class=line>
  <span class=sMK4o>
  -</span>
  <span class=sTEyZ>
   我是最后一个列表项目。
  </span></span></code></pre></template>
</template>
```

### 有序列表

当项目顺序重要时使用有序列表，如流程中的步骤。每项以数字开头。

```vue
<template>
  <ol>
  <li>
  我是列表项目。</li>
  <li>
  我是另一个列表项目。</li>
  <li>
  我是最后一个列表项目。</li></ol>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=1. 我是列表项目。
  2. 我是另一个列表项目。
  3. 我是最后一个列表项目。
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  1.</span>
  <span class=sTEyZ>
   我是列表项目。
  </span></span>
  <span class=line>
  <span class=sMK4o>
  2.</span>
  <span class=sTEyZ>
   我是另一个列表项目。
  </span></span>
  <span class=line>
  <span class=sMK4o>
  3.</span>
  <span class=sTEyZ>
   我是最后一个列表项目。
  </span></span></code></pre></template>
</template>
```

### 嵌套列表

为复杂结构创建具有子项目的分层列表。通过四个空格缩进子项目以进行嵌套。

```vue
<template>
  <ul>
  <li>
  我是列表项目。
  
  <ul>
  <li>
  我是嵌套列表项目。</li>
  <li>
  我是另一个嵌套列表项目。</li></ul></li>
  <li>
  我是另一个列表项目。</li></ul>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=- 我是列表项目。
    - 我是嵌套列表项目。
    - 我是另一个嵌套列表项目。
  - 我是另一个列表项目。
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  -</span>
  <span class=sTEyZ>
   我是列表项目。
  </span></span>
  <span class=line>
  <span class=sMK4o>
    -</span>
  <span class=sTEyZ>
   我是嵌套列表项目。
  </span></span>
  <span class=line>
  <span class=sMK4o>
    -</span>
  <span class=sTEyZ>
   我是另一个嵌套列表项目。
  </span></span>
  <span class=line>
  <span class=sMK4o>
  -</span>
  <span class=sTEyZ>
   我是另一个列表项目。
  </span></span></code></pre></template>
</template>
```

## 表格

清晰地以行和列的形式呈现结构化数据。表格非常适合比较数据或列出属性。

```vue
<template>
  <table>
  <thead>
  <tr>
  <th>
  Prop</th>
  <th>
  Default</th>
  <th>
  Type</th></tr></thead>
  <tbody>
  <tr>
  <td>
  <code>
  name</code></td>
  <td />
  <td>
  <code>
  string</code></td></tr>
  <tr>
  <td>
  <code>
  size</code></td>
  <td>
  <code>
  md</code></td>
  <td>
  <code>
  string</code></td></tr>
  <tr>
  <td>
  <code>
  color</code></td>
  <td>
  <code>
  neutral</code></td>
  <td>
  <code>
  string</code></td></tr></tbody></table>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=| Prop    | Default   | Type                     |
  |---------|-----------|--------------------------|
  | `name`  |           | `string`{lang="ts-type"} |
  | `size`  | `md`      | `string`{lang="ts-type"} |
  | `color` | `neutral` | `string`{lang="ts-type"} |
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sTEyZ>
  | Prop    | Default   | Type                     |
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  |---------|-----------|--------------------------|
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  | </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  name</span>
  <span class=sMK4o>
  `</span>
  <span class=sTEyZ>
    |           | </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  string</span>
  <span class=sMK4o>
  `</span>
  <span class=sMK4o>
  {</span>
  <span class=spNyl>
  lang</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  ts-type</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  }</span>
  <span class=sTEyZ>
   |
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  | </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  size</span>
  <span class=sMK4o>
  `</span>
  <span class=sTEyZ>
    | </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  md</span>
  <span class=sMK4o>
  `</span>
  <span class=sTEyZ>
        | </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  string</span>
  <span class=sMK4o>
  `</span>
  <span class=sMK4o>
  {</span>
  <span class=spNyl>
  lang</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  ts-type</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  }</span>
  <span class=sTEyZ>
   |
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  | </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  color</span>
  <span class=sMK4o>
  `</span>
  <span class=sTEyZ>
   | </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  neutral</span>
  <span class=sMK4o>
  `</span>
  <span class=sTEyZ>
   | </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  string</span>
  <span class=sMK4o>
  `</span>
  <span class=sMK4o>
  {</span>
  <span class=spNyl>
  lang</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  ts-type</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  }</span>
  <span class=sTEyZ>
   |
  </span></span></code></pre></template>
</template>
```

## 块引用

突出显示重要的引用、参考或强调的文本。块引用在视觉上区分引用的内容。

### 单行

单行块引用最适合短小、有力的引用或适合在一行内的引用。要创建单行块引用，在段落前添加 `>`。非常适合短小且有力的引用。

```vue
<template>
  <blockquote>
  <p>
  Nuxt UI 是一个建立在 Reka UI 之上的 Vue 组件、可组合函数和工具的集合，面向结构和布局，被设计为应用程序的构建块。</p></blockquote>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=> Nuxt UI 是一个建立在 Reka UI 之上的 Vue 组件、可组合函数和工具的集合，面向结构和布局，被设计为应用程序的构建块。
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sCNwf>
  ></span>
  <span class=s7zQu>
   Nuxt UI 是一个建立在 Reka UI 之上的 Vue 组件、可组合函数和工具的集合，面向结构和布局，被设计为应用程序的构建块。
  </span></span></code></pre></template>
</template>
```

### 多行

多行块引用适用于较长的引用或当您需要在单个引用中包含多个段落时。

```vue
<template>
  <blockquote>
  <p>
  Nuxt UI 是一个建立在 Reka UI 之上的 Vue 组件、可组合函数和工具的集合，面向结构和布局，被设计为应用程序的构建块。</p>
  <p>
  使用 Nuxt UI 创建美观、响应式和可访问的 Vue 应用程序。</p></blockquote>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=> Nuxt UI 是一个建立在 Reka UI 之上的 Vue 组件、可组合函数和工具的集合，面向结构和布局，被设计为应用程序的构建块。
  >
  > 使用 Nuxt UI 创建美观、响应式和可访问的 Vue 应用程序。
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sCNwf>
  ></span>
  <span class=s7zQu>
   Nuxt UI 是一个建立在 Reka UI 之上的 Vue 组件、可组合函数和工具的集合，面向结构和布局，被设计为应用程序的构建块。
  </span></span>
  <span class=line>
  <span class=sCNwf>
  >
  </span></span>
  <span class=line>
  <span class=sCNwf>
  ></span>
  <span class=s7zQu>
   使用 Nuxt UI 创建美观、响应式和可访问的 Vue 应用程序。
  </span></span></code></pre></template>
</template>
```


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.
