文档样式一览

本文只列举本站中非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都应该为数字并意味着像素单位的尺寸，并且它们两者都是可选的。整个标记应该通过空格与图片链接相分割。

示例

---

---

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

对齐

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

注

此插件基于@mdit/plugin-container

示例

---

左对齐的内容

居中的内容

右对齐的内容

两端对齐的内容

---

::: 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风格的警告容器。

注

此插件基于@mdit/plugin-container

示例

---

成功

这是成功样式

info

这是提示样式，默认标题

警告

这是警告样式,支持其它插件

错误

这是错误样式

成功

可以嵌套

---

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

滚动横幅

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

注

此插件基于@mdit/plugin-container

示例

---

---

::: 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插件提供，用于创建自定义内容的卡片。

注

此插件基于@mdit/plugin-container

示例

---

标题

副标题

这是text样式

只有标题

这是flat样式

只有副标题

这是elevated样式

标题

副标题

这是tonal样式

这是outlined样式，没有标题和副标题

标题

副标题

这是plain样式
只能使用双空格或\换行

嵌套

支持嵌套，支持别的插件

---

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

文本均分

示例

---

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

---

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

贡献者

M1hono skyraah

页面历史

最后编辑于 大约 1 个月前

查看完整历史

98a7a0f - Add Vanilla category under develop.

bf99468 - Add Iframe plugin. Fix CreatePipeCollision.

6f30d01 - Change Index files, Add rules, Improve Nav bar, Make noguide default balue true, Fix Summary Path Error. I died.

67ab676 - Change Stylelist. The non-scalable format is no longer valid. 不可缩放的格式已无效。

4b50558 - Delete ratio attribute in Carousel. 修得我想吊。

8c9443d - Add back button.

94cde47 - Add Several plugins.

dd60785 - Fix guide icons and Improve Icons. Add justify container.

08af21d - add nav

3ee99a7 - add card plugin && bug fix

d8c2068 - update sth