VitePress Demo Page

This page demonstrates various features and syntax in VitePress.

Text Formatting

Basic Text Formatting

This is a plain text paragraph.

This is bold text

This is italic text

This is bold italic text

~~This is strikethrough text~~

This is inline code

This is a blockquote
It can span multiple lines

Lists

Unordered List

First item
Second item
- Sub-item 1
- Sub-item 2
Third item

Ordered List

First step
Second step
1. Sub-step A
2. Sub-step B
Third step

Task List

[x] Completed task
[ ] Uncompleted task
[ ] Another todo item

Code Blocks

Inline Code

Use console.log() in JavaScript to output content.

Code Blocks with Syntax Highlighting

javascript

// JavaScript example
function greet(name) {
  return `Hello, ${name}!`;
}

const message = greet('VitePress');
console.log(message);

python

# Python example
def greet(name):
    return f"Hello, {name}!"

message = greet("VitePress")
print(message)

html

<!-- HTML example -->
<!DOCTYPE html>
<html>
<head>
    <title>VitePress Demo</title>
</head>
<body>
    <h1>Welcome to VitePress</h1>
    <p>This is a demo page.</p>
</body>
</html>

css

/* CSS example */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.title {
  color: #42b883;
  font-size: 2em;
  text-align: center;
}

Code Blocks with Line Numbers

javascript

function fibonacci(n) {
  if (n <= 1) return n;
  
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(10)); // 55

Code Blocks with Filename

javascript

export function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

Tables

Feature	Description	Example
Bold	Bold text	`text`
Italic	Italic text	`text`
`Code`	Inline code	`code`
Link	Clickable link	`[text](url)`

Alignment

Left Aligned	Center Aligned	Right Aligned
Left content	Center content	Right content
Left	Center	Right
123	456	789

Images

Local Images

To use local images, place them in the docs/public/images/ folder and reference them like this:

markdown

![Local Image](/images/your-image.png)

Basic Image Insertion (External Links)

Images with Titles

Using HTML to Control Image Size

Image Alignment

Side-by-Side Images

Videos

Using HTML video Tag

Local Video Files

To use local video files, place them in the docs/public/videos/ folder and reference them like this:

html

<video width="100%" controls>
  <source src="/videos/your-video.mp4" type="video/mp4">
  <source src="/videos/your-video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

Embedding YouTube Videos

Video Embedding Alternatives

Since Bilibili has CORS restrictions that prevent embedding in many cases, here are some alternatives:

Option 1: Link to Bilibili Video

Instead of embedding, provide a link that opens in a new tab:

Watch on Bilibili ↗

Option 2: Use a Video Screenshot with Link

▶️

Click to watch on Bilibili

Option 3: Embed from Other Platforms

Consider using platforms with better embedding support:

YouTube (shown above)
Vimeo
Self-hosted videos in /public/videos/

Special Containers

Tip Container

TIP

This is a tip container for displaying helpful information.

WARNING

This is a warning container for alerting users to important notes.

DANGER

This is a danger container for critical warnings.

Click to view details

This is a collapsible details container. Click the title to expand/collapse the content.

It can contain multiple lines and other Markdown elements:

List item 1
List item 2

javascript

console.log('Hello from details container!');

Custom Containers

Information

This is a custom information container.

Mathematical Formulas

Inline Formulas

Einstein's mass-energy equation: $E = mc^2$

Block Formulas

$$ \frac{1}{\sigma\sqrt{2\pi}} e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^2} $$

Complex Formulas

$$ \begin{aligned} \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 \ \nabla \times \vec{\mathbf{E}}, +, \frac1c, \frac{\partial\vec{\mathbf{B}}}{\partial t} &= \vec{\mathbf{0}} \ \nabla \cdot \vec{\mathbf{B}} &= 0 \end{aligned} $$

Emoji

VitePress supports emoji! 🎉

😀 Smiley face
🚀 Rocket
💡 Light bulb
❤️ Heart
👍 Thumbs up
🌟 Star

Advanced Features

Footnotes

This is text with a footnote[^1].

[^1]: This is the footnote content.

Abbreviations

VitePress is an implementation of SSG.

*[SSG]: Static Site Generator

Definition Lists

VitePress : A static site generator based on Vite and Vue

Markdown : A lightweight markup language : Can be converted to HTML

Keyboard Keys

Use Ctrl + C to copy.

Use Cmd + V to paste.

Horizontal Rule

Badges

Using VitePress Built-in Components

DefaultTipWarningDanger

Using shields.io

File Tree

docs/
├── .vitepress/
│   └── config.ts
├── index.md
├── demo.md
├── feature-requests.md
├── public/
│   └── images/
│       └── README.md
└── zh/
    ├── index.md
    ├── demo.md
    └── feature-requests.md

Custom HTML

Custom Style Block

You can use HTML and inline styles to create custom content

Timeline Example

2024.01 - Project Launch

2024.06 - Feature Development

2024.12 - Official Release

This demo page showcases various Markdown syntax and features commonly used in VitePress. You can reference and use these examples as needed.

VitePress Demo Page ​

Text Formatting ​

Basic Text Formatting ​

Lists ​

Unordered List ​

Ordered List ​

Task List ​

Links ​

Internal Links ​

External Links ​

Anchor Links ​

Code Blocks ​

Inline Code ​

Code Blocks with Syntax Highlighting ​

Code Blocks with Line Numbers ​

Code Blocks with Filename ​

Tables ​

Alignment ​

Images ​

Local Images ​

Basic Image Insertion (External Links) ​

Images with Titles ​

Using HTML to Control Image Size ​

Image Alignment ​

Side-by-Side Images ​

Videos ​

Using HTML video Tag ​

Local Video Files ​

Embedding YouTube Videos ​

Video Embedding Alternatives ​

Option 1: Link to Bilibili Video ​

Option 2: Use a Video Screenshot with Link ​

Option 3: Embed from Other Platforms ​

Special Containers ​

Tip Container ​

Custom Containers ​

Mathematical Formulas ​

Inline Formulas ​

Block Formulas ​

Complex Formulas ​

Emoji ​

Advanced Features ​

Footnotes ​

Abbreviations ​

Definition Lists ​

Keyboard Keys ​

Horizontal Rule ​

Badges ​

Using VitePress Built-in Components ​

Using shields.io ​

File Tree ​

Custom HTML ​

Custom Style Block

Timeline Example ​

VitePress Demo Page

Text Formatting

Basic Text Formatting

Lists

Unordered List

Ordered List

Task List

Links

Internal Links

External Links

Anchor Links

Code Blocks

Inline Code

Code Blocks with Syntax Highlighting

Code Blocks with Line Numbers

Code Blocks with Filename

Tables

Alignment

Images

Local Images

Basic Image Insertion (External Links)

Images with Titles

Using HTML to Control Image Size

Image Alignment

Side-by-Side Images

Videos

Using HTML video Tag

Local Video Files

Embedding YouTube Videos

Video Embedding Alternatives

Option 1: Link to Bilibili Video

Option 2: Use a Video Screenshot with Link

Option 3: Embed from Other Platforms

Special Containers

Tip Container

Custom Containers

Mathematical Formulas

Inline Formulas

Block Formulas

Complex Formulas

Emoji

Advanced Features

Footnotes

Abbreviations

Definition Lists

Keyboard Keys

Horizontal Rule

Badges

Using VitePress Built-in Components

Using shields.io

File Tree

Custom HTML

Timeline Example