文档样式一览

本文只列举本站中非Markdown官方提供的语法，若需要官方语法参考，请参考：。

VitePress官方拓展

Markdown 扩展
VitePress 带有内置的 Markdown 扩展。

选项卡

由vitepress-plugin-tabs插件提供，用于创建一个可带标签的选项卡。

无标签选项卡

---

a content

---

:::tabs
== tab a
a content
== tab b
b content
:::

标签选项卡

---

a content

a content 2

---

:::tabs key:ab
== tab a
a content
== tab b
b content
:::

:::tabs key:ab
== tab a
a content 2
== tab b
b content 2
:::

代办清单

由markdown-it-task-lists插件提供，用于创建github风格的代办清单。

示例

---

• 未完成
• 已完成

---

- [ ] 未完成
- [x] 已完成

略缩词

由markdown-it-abbr插件提供，用于创建略缩词。

示例

---

The HTML specification is maintained by the W3C.

---

*[HTML]: Hyper Text Markup Language
*[W3C]:  World Wide Web Consortium
The HTML specification is maintained by the W3C.

图片尺寸

由@mdit/plugin-img-size插件提供，支持插入图片时设置图片尺寸。

在图片替代文字后面添加 =widthxheight，并用空格分隔。

width 和 height 都应该是数字，单位为像素，并且都是可选的。

![替代文字 =200x300](/example.png)
![替代文字 =200x](/example.jpg "标题")
![替代文字 =x300](/example.bmp)

<img src="/example.png" alt="替代文字" width="200" height="300" />
<img src="/example.jpg" alt="替代文字" title="标题" width="200" />
<img src="/example.bmp" alt="替代文字" height="300" />

示例

---

---

![Logo =200x200](/logo.png)
![Logo =150x](/logo.png)

对齐

由@mdit/plugin-align插件提供，能够用容器控制文字的对齐方式。

注

此插件基于

示例

---

左对齐的内容

居中的内容

右对齐的内容

两端对齐的内容

---

::: left
左对齐的内容
:::

::: center
居中的内容
:::

::: right
右对齐的内容
:::

::: justify
两端对齐的内容
:::

隐藏内容

由@mdit/plugin-spoiler插件提供，用于创建 隐藏内容 。

示例

---

VuePress Theme Hope 十分强大。

---

VuePress Theme Hope !!十分强大!!。

角标

由@mdit/plugin-sub与@mdit/plugin-sup插件提供，用于创建上下角标。

示例

---

下角标：H₂O 上角标：19^th

---

下角标：H~2~O
上角标：19^th^

旁注标记

由@mdit/plugin-ruby插件提供，用于创建旁注标记。

示例

---

中zhōng国guó

---

{中国:zhōng|guó}

示例

由@mdit/plugin-demo插件提供库支持，本站维护组成员提供样式支持，用于创建一个可预览的Markdown示例

示例

---

示例

---

这是示例！

---

这是示例！

---

::: demo 示例
这是示例！
:::

步骤组

由@mdit/plugin-tab插件提供库支持，本站维护组成员提供样式支持，用于创建一个表示步骤的选项卡

示例

---

---

::: stepper
@tab 第一步
这是第一步
@tab 第二步
这是第二步
@tab 第三步
这是第三步
:::

标记

由@mdit/plugin-mark和@mdit/plugin-ins插件提供，用于标记和突出显示内容。

示例

---

VuePress Theme Hope 十分强大。
VuePress Theme Hope 十分 强大。

---

VuePress Theme Hope ==十分强大==。  
VuePress Theme Hope ++十分++ 强大。

警告框

由本站维护成员编写的v-alert插件提供，用于创建vuetify风格的警告容器。

注

此插件基于

示例

---

---

::: v-success 成功
这是成功样式
:::
::: v-info 
这是提示样式，默认标题
:::
::: v-warning 警告
这是警告样式,支持其它++插件++
:::
:::: v-error 错误
这是错误样式
::: v-success 成功
可以嵌套
:::
::::

滚动横幅

由本站维护成员编写的carousels插件提供，用于创建自定义内容的滚动横幅。

注

此插件基于

示例

---

---

::: carousels#{"cycle": true, "interval": 2800, "undelimiters": true}
@tab
![1](https://docs.mihono.cn/mods/adventure/champions-unofficial/1.png)
@tab
![2](https://docs.mihono.cn/mods/adventure/champions-unofficial/2.png)
:::

内嵌外链

示例

---

---

:::iframes#{"src": "https://misode.github.io/"}
:::

尝试塞入一个 codeblock 试试？

配置语法

carousels容器的配置项由跟随在容器声明后的json提供，使用#以连接配置与容器声明。

配置字段	用途	类型	省缺值
src	网页的链接，必填	string	N/A
height	设置元素的高度。	length value	140px

卡片

由本站维护成员编写的card插件提供，用于创建自定义内容的卡片。

注

此插件基于

示例

---

---

:::text 标题#副标题
这是text样式
:::
:::flat 只有标题
这是flat样式
:::
:::elevated #只有副标题
这是elevated样式
:::
:::tonal 标题#副标题
这是tonal样式
:::
:::outlined
这是outlined样式，没有标题和副标题
:::
::::plain 标题#副标题
这是plain样式  
只能使用双空格或`\`换行
:::tonal 嵌套
支持嵌套，支持!!别的插件!!
:::
::::

文本均分

示例

---

这是一个展示均分对齐的段落。通过CSS的text-align: justify属性，可以在VitePress中实现文字的两端对齐效果。

---

::: justify
这是一个展示均分对齐的段落。通过CSS的text-align: justify属性，可以在VitePress中实现文字的两端对齐效果。
:::