示例

本文档展示各种 Markdown 和 HTML 表达方式的示例。

🖼️ 图片

Markdown 语法

HTML 标签（可控制大小和样式）

📊 表格

基础表格

功能	Markdown	HTML
标题	# 标题	<h1>标题</h1>
粗体	**文本**	<strong>文本</strong>
链接	[文本](URL)	<a href="URL">文本</a>

对齐表格

左对齐	居中	右对齐
内容1	内容2	内容3
数据A	数据B	数据C

复杂表格

项目	状态	进度	备注
功能A	✅ 完成	100%	已测试
功能B	🚧 进行中	60%	待优化
功能C	⏳ 待开始	0%	计划中

📐 数学公式

使用 KaTeX 渲染 LaTeX 数学公式：

行内公式

使用单个 $ 包裹：这是行内公式 $E = mc^2$

块级公式

使用双 $$ 包裹：

$\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n$

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

$\begin{pmatrix} a & b \\ c & d \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} = \begin{pmatrix} ax + by \\ cx + dy \end{pmatrix}$

更多公式示例

分数：$\frac{a}{b}$ 或 $\dfrac{a}{b}$

根号：$\sqrt{x}$ 或 $\sqrt[n]{x}$

上下标：$x^2$ 和 $x_i$

求和与积分：

$\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$

$\int_{0}^{\infty} e^{-x} dx = 1$

💻 代码块

JavaScript

// 箭头函数
const add = (a, b) => a + b;

// 异步函数
async function fetchData() {
  const response = await fetch('/api/data');
  return await response.json();
}

// 解构赋值
const { name, age } = user;
const [first, second] = array;

Python

def fibonacci(n):
    """计算斐波那契数列"""
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# 列表推导式
squares = [x**2 for x in range(10)]

CSS

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

Bash

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建项目
npm run build

📝 列表

无序列表

• 项目 1
• 项目 2
  • 子项目 2.1
  • 子项目 2.2
• 项目 3

有序列表

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

任务列表

• [x] 已完成的任务
• [x] 另一个已完成的任务
• [ ] 待完成的任务
• [ ] 另一个待完成的任务

自定义列表

重要提示：

• 这是重要信息
• 需要特别注意

注意事项：

• 避免常见错误
• 遵循最佳实践

💬 引用

单层引用

这是一段引用文本。可以用来强调重要信息或者引用他人的话。

多层引用

第一层引用

第二层引用

第三层引用

引用中的代码

这是一个包含代码的引用：

const example = '代码示例';

⚠️ 警告和提示框

提示

这是一个提示框，用于显示有用的信息。

警告

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

危险

这是一个危险提示框，用于显示重要的警告信息。

信息

这是一个信息框，用于显示一般信息。

详细信息

点击展开查看详细信息。

这里可以放置更多内容，包括代码、列表等。

🎨 文本样式

• 粗体文本
• 斜体文本
• 粗斜体文本
• 删除线文本
• 行内代码
• 高亮文本

🔗 链接

普通链接

VitePress 官网

GitHub

带标题的链接

VitePress 官网

自动链接

https://vitepress.dev/

引用式链接

这是引用式链接的示例。

📋 水平分割线

---

🎯 特殊字符

• 版权符号：©
• 注册商标：®
• 商标：™
• 箭头：→ ← ↑ ↓
• 数学符号：× ÷ ± ≤ ≥ ≠

📦 折叠内容

点击展开查看代码

function example() {
  console.log('这是一个示例');
}

🎨 HTML 元素

按钮样式

彩色文本

紫色文本红色文本绿色文本黄色背景

居中对齐

这是居中的文本

卡片样式

卡片标题

这是卡片内容，可以用来展示重要信息。

不同类型的卡片

信息卡片

这是一个信息类型的卡片，使用蓝色主题。

成功卡片

这是一个成功类型的卡片，使用绿色主题。

警告卡片

这是一个警告类型的卡片，使用红色主题。

📈 图表示例

Mermaid 流程图

graph TD
    A[开始] --> B{判断条件}
    B -->|是| C[执行操作1]
    B -->|否| D[执行操作2]
    C --> E[结束]
    D --> E

Mermaid 序列图

sequenceDiagram
    participant A as 用户
    participant B as 系统
    A->>B: 发送请求
    B->>B: 处理请求
    B-->>A: 返回结果

Mermaid 甘特图

gantt
    title 项目进度
    dateFormat  YYYY-MM-DD
    section 设计
    需求分析           :done,    des1, 2024-01-01,2024-01-05
    原型设计           :active,  des2, 2024-01-06, 3d
    section 开发
    前端开发           :         dev1, 2024-01-09, 5d
    后端开发           :         dev2, 2024-01-09, 5d

Mermaid 状态图

stateDiagram-v2
    [*] --> 待处理
    待处理 --> 进行中: 开始
    进行中 --> 已完成: 完成
    进行中 --> 已取消: 取消
    已完成 --> [*]
    已取消 --> [*]

Mermaid 类图

classDiagram
    class 用户 {
        +String 姓名
        +String 邮箱
        +登录()
        +注销()
    }
    class 订单 {
        +String 订单号
        +Date 日期
        +计算总价()
    }
    用户 "1" --> "*" 订单

🎭 Emoji 示例

常用 Emoji：

• 📚 📖 📝 ✏️ 📋
• 💻 🖥️ 📱 ⌨️ 🖱️
• ✅ ❌ ⚠️ 💡 🔍
• 🚀 ⚡ 🔥 💎 ⭐
• 📊 📈 📉 💹 📌

🎨 更多 HTML 元素示例

进度条

75%

标签/徽章

标签1标签2标签3标签4

分隔线样式

引用块样式

这是一个自定义样式的引用块，可以用来突出显示重要信息。

📱 响应式布局示例

卡片 1

内容区域

卡片 2

内容区域

卡片 3

内容区域

📄 完整示例组合

下面是一个综合示例：

🎯 综合示例卡片

这是一个包含多种元素的示例：

1. 列表项：包含 斜体 和 代码
2. 链接：访问示例
3. 表格：

项目	值
示例	数据