Extensions
Header Anchors
Headers automatically have anchors applied.
Custom Anchors
To specify a custom anchor for a header instead of using the auto-generated one, add a suffix to the header:
# Using a Custom Anchor {#my-anchor}This allows linking to the header as #my-anchor instead of the default #using-a-custom-anchor.
Links
Internal and external links are specially processed.
The theme automatically generates a new link for each md file and stores it in the permalink of the corresponding md file's frontmatter. You can modify these links at any time. You can also disable this feature via the theme.autoFrontmatter option, reverting to VuePress's default behavior.
Internal Links
There are three ways to use internal links:
- Use the generated
permalinkas the target for the internal link. - Use the relative path of the md file as the target for the internal link.
- Use the absolute path of the md file as the target for the internal link. The absolute path
/indicates starting from the${sourceDir}directory.
[Markdown](/guide/markdown/)
[Markdown](./basic.md)Renders as:
External Links
External links have target="_blank" rel="noreferrer":
GitHub-Style Tables
Input:
| Tables | Are | Cool |
| ------------- | :-----------: | ----: |
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |Output:
| Tables | Are | Cool |
|---|---|---|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
Emoji 🎉
Input:
:tada: :100:Output:
🎉 💯
You can find the list of all supported emojis here.
Table of Contents
Input:
[[TOC]]Output:
Custom Containers
Custom containers can be defined by their type, title, and content.
Default Title
Input:
::: note
This is a note box
:::
::: info
This is an info box.
:::
::: tip
This is a tip.
:::
::: warning
This is a warning.
:::
::: caution
This is a dangerous warning.
:::
::: details
This is a details block.
:::Output:
Note
This is a note box
Info
This is an info box.
Tips
This is a tip.
Warning
This is a warning.
Caution
This is a dangerous warning.
Details
This is a details block.
Custom Title
You can set a custom title by appending text after the container's "type".
Input:
::: caution STOP
Danger zone, do not proceed
:::
::: details Click to view code
```js
console.log('Hello, VitePress!')
```
:::Output:
STOP
Danger zone, do not proceed
Click to view code
console.log('Hello, VitePress!')GitHub-Style Alerts
The theme also supports rendering GitHub-style alerts. They are rendered in the same way as custom containers.
Input:
> [!NOTE]
> Emphasizes important information that users should know even when skimming the document.
> [!TIP]
> Advisory information that helps users achieve their goals more smoothly.
> [!IMPORTANT]
> Information crucial for users to achieve their goals.
> [!WARNING]
> Key content that requires immediate user attention due to potential risks.
> [!CAUTION]
> Negative impacts of certain actions.Output:
Note
Emphasizes important information that users should know even when skimming the document.
Tips
Advisory information that helps users achieve their goals more smoothly.
Important
Information crucial for users to achieve their goals.
Warning
Key content that requires immediate user attention due to potential risks.
Caution
Negative impacts of certain actions.
Mathematical Equations
Input:
When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
**Maxwell's equations:**
| equation | description |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
| $\nabla \cdot \vec{\mathbf{B}} = 0$ | divergence of $\vec{\mathbf{B}}$ is zero |
| $\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} = \vec{\mathbf{0}}$ | curl of $\vec{\mathbf{E}}$ is proportional to the rate of change of $\vec{\mathbf{B}}$ |
| $\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ | _wha?_ |Output:
When , there are two solutions to and they are
Maxwell's equations:
| equation | description |
|---|---|
| divergence of is zero | |
| curl of is proportional to the rate of change of | |
| wha? |
Superscripts and Subscripts
- Use
^ ^for superscript notation. - Use
~ ~for subscript notation.
Input:
- 19^th^
- H~2~OOutput:
- 19th
- H2O
Custom Alignment
Input:
::: left
Left-aligned content
:::
::: center
Centered content
:::
::: right
Right-aligned content
:::Output:
Left-aligned content
Centered content
Right-aligned content
Attribute Support
You can use special syntax to add attributes to Markdown elements.
Adding attributes to an image:
This adds a class attribute named full-width and a width attribute with the value 100% to the image.
{.full-width width="100%"}Other attributes are also supported:
A paragraph with text. {#p .a .b align=center customize-attr="content with spaces"}This will be rendered as:
<p id="p" class="a b" align="center" customize-attr="content with spaces">
A paragraph with text.
</p>Task Lists
Input:
- [ ] Task 1
- [x] Task 2
- [ ] Task 3Output:
Footnotes
Input:
The farthest distance in the world Is not the distance between life and death But you don't know I love you when I stand in front of you.[^footnote1]。
[^footnote1]: From India.Rabindranath Tagore **The Farthest Distance in the World**Output:
The farthest distance in the world Is not the distance between life and death But you don't know I love you when I stand in front of you.[1]。
From India.Rabindranath Tagore The Farthest Distance in the World ↩︎
