CryChicDoc

English

简体中文

English

简体中文

Switch Theme

Document Style Overview ​

This document only lists the syntax that is not officially provided by Markdown on this site. For official syntax reference, please refer to: .

VitePress Official Extensions ​

Markdown Extensions
VitePress comes with built-in Markdown extensions.

Tabs ​

Provided by the vitepress-plugin-tabs plugin, used to create labeled tabs.

Unlabeled Tabs

a content
md
:::tabs
== tab a
a content
== tab b
b content
:::
Labeled Tabs

a content

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

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

Task Lists ​

Provided by the markdown-it-task-lists plugin, used to create GitHub-style task lists.

Example
  • Incomplete
  • Completed
md
- [ ] Incomplete
- [x] Completed

Abbreviations ​

Provided by the markdown-it-abbr plugin, used to create abbreviations.

Example

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

Image Size ​

Provided by the @mdit/plugin-img-size plugin, supports setting image dimensions when inserting images.

Add =widthxheight after the image alt text, separated by a space.

Both width and height should be numbers in pixels and are optional.

md
![Alt text =200x300](/example.png)
![Alt text =200x](/example.jpg "Title")
![Alt text =x300](/example.bmp)
html
<img src="/example.png" alt="Alt text" width="200" height="300" />
<img src="/example.jpg" alt="Alt text" title="Title" width="200" />
<img src="/example.bmp" alt="Alt text" height="300" />
Example

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

Alignment ​

Provided by the @mdit/plugin-align plugin, allows controlling text alignment using containers.

Note

This plugin is based on

Example

Left-aligned content

Centered content

Right-aligned content

Justified content
md
::: left
Left-aligned content
:::

::: center
Centered content
:::

::: right
Right-aligned content
:::

::: justify
Justified content
:::

Spoilers ​

Provided by the @mdit/plugin-spoiler plugin, used to create spoiler content.

Example

VuePress Theme Hope is very powerful.
md
VuePress Theme Hope !!is very powerful!!.

Subscript & Superscript ​

Provided by the @mdit/plugin-sub and @mdit/plugin-sup plugins, used to create subscripts and superscripts.

Example

Subscript: H2O Superscript: 19th
md
Subscript: H~2~O
Superscript: 19^th^

Ruby Annotations ​

Provided by the @mdit/plugin-ruby plugin, used to create ruby annotations.

Example

Chinazhōng|guó
md
{China:zhōng|guó}

Demo ​

Library support provided by the @mdit/plugin-demo plugin, with styling support from site maintainer , used to create previewable Markdown examples.

Example
Example

This is an example!
md
This is an example!
md
::: demo Example
This is an example!
:::

Step Groups ​

Library support provided by the @mdit/plugin-tab plugin, with styling support from site maintainer , used to create step-based tabs.

Example
md
::: stepper
@tab Step 1
This is step 1
@tab Step 2
This is step 2
@tab Step 3
This is step 3
:::

Mark & Insert ​

Provided by the @mdit/plugin-mark and @mdit/plugin-ins plugins, used to mark and highlight content.

Example

VuePress Theme Hope is very powerful.
VuePress Theme Hope is very powerful.
md
VuePress Theme Hope ==is very powerful==.  
VuePress Theme Hope ++is very++ powerful.

Alert Boxes ​

Provided by the v-alert plugin written by site maintainer , used to create Vuetify-style alert containers.

Note

This plugin is based on

Example
md
::: v-success Success
This is success style
:::
::: v-info 
This is info style, default title
:::
::: v-warning Warning
This is warning style, supports other ++plugins++
:::
:::: v-error Error
This is error style
::: v-success Success
Can be nested
:::
::::

Carousel Banners ​

Provided by the carousels plugin written by site maintainer , used to create scrolling banners with custom content.

Note

This plugin is based on

Example
md
::: 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)
:::

Embedded External Links ​

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

Try embedding a codeblock?

Configuration Syntax ​

The configuration options for the carousels container are provided by JSON following the container declaration, connected with #.

Configuration Field Purpose Type Default Value
src URL of the webpage, required string N/A
height Sets the element height length value 140px

Cards ​

Provided by the card plugin written by site maintainer , used to create cards with custom content.

Note

This plugin is based on

Example
md
:::text Title#Subtitle
This is text style
:::
:::flat Title Only
This is flat style
:::
:::elevated #Subtitle Only
This is elevated style
:::
:::tonal Title#Subtitle
This is tonal style
:::
:::outlined
This is outlined style, no title or subtitle
:::
::::plain Title#Subtitle
This is plain style  
Only double spaces or `\` can be used for line breaks
:::tonal Nested
Supports nesting, supports !!other plugins!!
:::
::::

Justified Text ​

Example

This is a paragraph demonstrating justified alignment. Through CSS's text-align: justify property, you can achieve justified text alignment in VitePress.
md
::: justify
This is a paragraph demonstrating justified alignment. Through CSS's text-align: justify property, you can achieve justified text alignment in VitePress.
:::