Opccii

Appearance

VitePress 全功能展示 ​

1. 文本格式化 ​

粗体文本 使用双星号

斜体文本 使用单星号

粗斜体 使用三星号

删除线 使用双波浪线

==高亮文本== 使用双等号

上标：H~2~O (使用波浪号)

下标：X^2^ (使用脱字符号)

2. 代码块 ​

行内代码 ​

使用 const code = 'inline' 来展示行内代码

普通代码块 ​

javascript
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('VitePress'));

代码高亮 ​

typescript
interface User {
  name: string;
  age: number;
}

function getUser(user: User): string {
  return `${user.name} is ${user.age} years old`;
}

行号显示 ​

python
def hello():
    print("Hello, VitePress!")
    return True

result = hello()

代码聚焦 ​

js
const a = 1
const b = 2
const c = a + b

行高亮 ​

js
const a = 1
const b = 2
const c = a + b

错误高亮 ​

js
const a = 1
const b = 2
const c = a + b

警告高亮 ​

js
const a = 1
const b = 2
const c = a + b

3. 链接 ​

访问 VitePress 官网

带标题的链接

邮件链接：example@email.com

4. 图片 ​

VitePress Logo

带链接的图片：

VitePress Logo

5. 列表 ​

无序列表 ​

  • 第一项
  • 第二项
    • 嵌套项 1
    • 嵌套项 2
  • 第三项
    • 二级嵌套
      • 三级嵌套

有序列表 ​

  1. 第一步
  2. 第二步
  3. 第三步
    1. 子步骤 1
    2. 子步骤 2

定义列表 ​

VitePress : 基于 Vite 的静态站点生成器

Vue : 渐进式 JavaScript 框架

任务列表 ​

  • [x] 已完成的任务
  • [ ] 未完成的任务
  • [ ] 另一个任务
    • [x] 子任务 1
    • [ ] 子任务 2

6. 引用块 ​

这是一个引用块

可以有多行

多级引用

嵌套引用

再次嵌套

7. 表格 ​

基本表格 ​

功能支持状态
Markdown✅完整支持
代码高亮✅完整支持
自定义主题✅完整支持
搜索✅完整支持

表格对齐 ​

左对齐居中对齐右对齐
内容1内容2内容3
内容4内容5内容6

表格中的格式化 ​

功能示例
粗体bold
斜体italic
代码code
链接link

8. 自定义容器 ​

信息容器 ​

INFO

这是一个信息容器，用于展示一般信息。

提示容器 ​

TIP

这是一个提示容器，用于展示有用的建议。

警告容器 ​

WARNING

这是一个警告容器，用于提醒用户注意。

危险容器 ​

DANGER

这是一个危险容器，用于警示重要风险。

详情容器 ​

点击展开查看详情

这是详情容器的内容，可以隐藏起来。

自定义标签 ​

自定义标题

使用自定义标题的信息容器。

9. 脚注 ​

这是一个带有脚注的句子^1

另一个使用脚注的句子^2

10. 表情符号 ​

😄 ❤️ 👍 🚀 🎉

:vite: :vue: :typescript: :javascript:

完整的表情符号列表请访问 Emoji Cheat Sheet

11. 目录 ​

12. 锚点链接 ​

这是一个标题 ​

可以通过 自定义锚点链接 跳转到上方

另一个标题 ​

跳转到另一个标题

13. 代码组 ​

bash
npm install vitepress
npm run docs:dev
bash
yarn add vitepress
yarn docs:dev
bash
pnpm add vitepress
pnpm docs:dev

14. 导入 Markdown ​

导入的 Markdown 内容 ​

这是一个从其他文件导入的 Markdown 内容片段。

特性 ​

  • 可以跨文件复用内容
  • 适合抽取重复使用的 Markdown
  • 保持内容一致性

示例代码 ​

javascript
// 这是导入的代码示例
export default {
  name: 'PartialContent',
  data() {
    return {
      message: 'Hello from partial!'
    }
  }
}

表格示例 ​

导入类型用途
部分内容重复使用的内容块
代码片段常用代码示例
文档片段通用文档段落

15. 高级用法 ​

数学公式 (需要配置) ​

假设 $a > 0$，则：

$$ \int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2} $$

行内公式：$\sqrt{3x-1} + (1+x)^2$

Kotlin/Scala 风格语法 (示例) ​

kotlin
fun main() {
    val name = "VitePress"
    println("Hello, $name!")
}
scala
def main(args: Array[String]): Unit = {
  val name = "VitePress"
  println(s"Hello, $name!")
}

16. 上标和下标 ​

H~2~O 是水

E = mc^2^ 是质能方程

17. 直接 HTML ​

HTML 容器示例

可以在 Markdown 中直接使用 HTML

18. 表格合并 (HTML) ​

合并的单元格
单元格1单元格2单元格3