Appearance
📝 Markdown写作完全指南
掌握Markdown语法，轻松创建专业级技术文档
📋 目录
🎯 基础语法
1. 标题层级
markdown
# 一级标题 (H1)
## 二级标题 (H2)
### 三级标题 (H3)
#### 四级标题 (H4)
##### 五级标题 (H5)
###### 六级标题 (H6)2. 文本格式化
markdown
**粗体文本** 或 __粗体文本__
*斜体文本* 或 _斜体文本_
***粗斜体文本*** 或 ___粗斜体文本___
~~删除线文本~~
`行内代码`
> 引用文本
> 可以多行3. 列表
markdown
<!-- 无序列表 -->
- 项目1
- 项目2
- 子项目2.1
- 子项目2.2
- 项目3
<!-- 有序列表 -->
1. 第一步
2. 第二步
1. 子步骤2.1
2. 子步骤2.2
3. 第三步
<!-- 任务列表 -->
- [x] 已完成任务
- [ ] 未完成任务
- [ ] 待办事项4. 链接与引用
markdown
<!-- 基本链接 -->
[链接文本](https://example.com)
<!-- 带标题的链接 -->
[链接文本](https://example.com "链接标题")
<!-- 引用链接 -->
[链接文本][链接标识]
[链接标识]: https://example.com "链接标题"
<!-- 自动链接 -->
<https://example.com>
<mailto:user@example.com>🖼️ 图片处理技巧
1. 基本图片语法
markdown
<!-- 基本图片 -->
<!-- 带链接的图片 -->
[](链接地址)
<!-- 带标题的图片 -->
2. 图片路径管理
在VitePress中，图片通常放在 docs/public/ 目录下：
docs/
├── public/
│ ├── images/
│ │ ├── logo.png
│ │ ├── screenshots/
│ │ └── diagrams/
│ └── assets/
└── index.md使用示例：
markdown
<!-- 引用public目录下的图片 -->
<!-- 引用子目录中的图片 -->
<!-- 引用其他文档中的图片 -->
3. 图片尺寸控制
VitePress支持HTML标签，可以控制图片尺寸：
markdown
<!-- 使用HTML控制尺寸 -->
<img src="/images/logo.png" alt="Logo" width="200" height="100">
<!-- 使用CSS样式 -->
<img src="/images/logo.png" alt="Logo" style="width: 300px; height: auto;">
<!-- 响应式图片 -->
<img src="/images/hero.jpg" alt="Hero Image" style="max-width: 100%; height: auto;">4. 图片优化技巧
markdown
<!-- 懒加载图片 -->
<img src="/images/large-image.jpg" alt="大图片" loading="lazy">
<!-- 图片说明 -->
<figure>
<img src="/images/diagram.png" alt="系统架构图" style="max-width: 100%;">
<figcaption>图1: 系统整体架构设计</figcaption>
</figure>
<!-- 图片网格 -->
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
<img src="/images/screenshot1.png" alt="截图1">
<img src="/images/screenshot2.png" alt="截图2">
</div>🎥 视频嵌入方法
1. 本地视频
markdown
<!-- 基本视频标签 -->
<video controls width="100%">
<source src="/videos/demo.mp4" type="video/mp4">
<source src="/videos/demo.webm" type="video/webm">
您的浏览器不支持视频播放。
</video>
<!-- 带缩略图的视频 -->
<video controls poster="/images/video-thumbnail.jpg" width="100%">
<source src="/videos/tutorial.mp4" type="video/mp4">
</video>
<!-- 自动播放视频（静音） -->
<video autoplay muted loop width="100%">
<source src="/videos/background.mp4" type="video/mp4">
</video>2. 在线视频嵌入
markdown
<!-- YouTube视频 -->
<iframe
width="100%"
height="400"
src="https://www.youtube.com/embed/VIDEO_ID"
frameborder="0"
allowfullscreen>
</iframe>
<!-- Bilibili视频 -->
<iframe
src="//player.bilibili.com/player.html?aid=AV号&bvid=BV号"
scrolling="no"
border="0"
frameborder="no"
framespacing="0"
allowfullscreen="true"
width="100%"
height="400">
</iframe>
<!-- 腾讯视频 -->
<iframe
frameborder="0"
src="https://v.qq.com/txp/iframe/player.html?vid=视频ID"
width="100%"
height="400"
allowfullscreen>
</iframe>3. 视频响应式设计
markdown
<!-- 响应式视频容器 -->
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
src="https://www.youtube.com/embed/VIDEO_ID"
frameborder="0"
allowfullscreen>
</iframe>
</div>📊 表格创建与美化
1. 基本表格语法
markdown
| 列标题1 | 列标题2 | 列标题3 |
|---------|---------|---------|
| 行1列1 | 行1列2 | 行1列3 |
| 行2列1 | 行2列2 | 行2列3 |
| 行3列1 | 行3列2 | 行3列3 |2. 表格对齐
markdown
| 左对齐 | 居中对齐 | 右对齐 |
|:-------|:--------:|-------:|
| 内容 | 内容 | 内容 |
| 长文本 | 中文本 | 短文本 |3. 复杂表格示例
markdown
| 功能特性 | 支持状态 | 说明 | 版本要求 |
|:---------|:--------:|:-----|:--------:|
| 基础语法 | ✅ | 完全支持 | 1.0+ |
| 扩展语法 | ⚠️ | 部分支持 | 1.2+ |
| 自定义样式 | ❌ | 暂不支持 | 2.0+ |
| 插件系统 | 🔄 | 开发中 | 2.1+ |4. 表格美化技巧
markdown
<!-- 使用HTML创建更复杂的表格 -->
<table style="width: 100%; border-collapse: collapse; margin: 20px 0;">
<thead>
<tr style="background-color: #f5f5f5;">
<th style="padding: 12px; border: 1px solid #ddd; text-align: left;">功能</th>
<th style="padding: 12px; border: 1px solid #ddd; text-align: center;">状态</th>
<th style="padding: 12px; border: 1px solid #ddd; text-align: left;">备注</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 12px; border: 1px solid #ddd;">Markdown支持</td>
<td style="padding: 12px; border: 1px solid #ddd; text-align: center;">✅</td>
<td style="padding: 12px; border: 1px solid #ddd;">完全兼容</td>
</tr>
<tr style="background-color: #fafafa;">
<td style="padding: 12px; border: 1px solid #ddd;">语法高亮</td>
<td style="padding: 12px; border: 1px solid #ddd; text-align: center;">✅</td>
<td style="padding: 12px; border: 1px solid #ddd;">支持200+语言</td>
</tr>
</tbody>
</table>💻 代码块与语法高亮
1. 行内代码
markdown
使用 `console.log()` 来输出调试信息。
在JavaScript中，`const` 和 `let` 都是块级作用域。2. 代码块
markdown
<!-- 基本代码块 -->function hello() { console.log("Hello, World!"); }
<!-- 带语言标识的代码块 -->
```javascript
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet("VitePress"));javascript:src/main.js
function main() {
// 主函数
console.log("应用启动");
}
### 3. 代码块高亮
VitePress支持多种编程语言的语法高亮：
```markdown
```bash
# 安装依赖
npm install vitepress
# 启动开发服务器
npm run docs:devpython
def fibonacci(n):
"""计算斐波那契数列"""
if n <= 1:
return n
return fibonacci(n-1) + fibonacci(n-2)
print(fibonacci(10))sql
-- 查询用户信息
SELECT
u.id,
u.username,
u.email,
u.created_at
FROM users u
WHERE u.status = 'active'
ORDER BY u.created_at DESC;
## 🚀 高级技巧
### 1. 折叠内容
```markdown
<details>
<summary>点击展开详细内容</summary>
这里是折叠的详细内容，可以包含：
- 列表项
- 代码块
- 图片
- 表格
</details>2. 警告和提示框
markdown
::: tip 提示
这是一个提示信息框，用于重要提醒。
:::
::: warning 警告
这是一个警告信息框，用于需要注意的事项。
:::
::: danger 危险
这是一个危险信息框，用于关键警告。
:::
::: info 信息
这是一个信息框，用于补充说明。
:::3. 数学公式
markdown
<!-- 行内公式 -->
行内公式：$E = mc^2$
<!-- 块级公式 -->
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$
<!-- 复杂公式 -->
$$
\begin{align}
\nabla \cdot \vec{E} &= \frac{\rho}{\epsilon_0} \\
\nabla \cdot \vec{B} &= 0 \\
\nabla \times \vec{E} &= -\frac{\partial \vec{B}}{\partial t} \\
\nabla \times \vec{B} &= \mu_0\vec{J} + \mu_0\epsilon_0\frac{\partial \vec{E}}{\partial t}
\end{align}
$$4. 图表和流程图
markdown
<!-- Mermaid流程图 -->
```mermaid
graph TD
A[开始] --> B{判断条件}
B -->|是| C[执行操作1]
B -->|否| D[执行操作2]
C --> E[结束]
D --> Emermaid
sequenceDiagram
participant 用户
participant 前端
participant 后端
participant 数据库
用户->>前端: 点击按钮
前端->>后端: 发送请求
后端->>数据库: 查询数据
数据库-->>后端: 返回结果
后端-->>前端: 响应数据
前端-->>用户: 显示结果
## ⚡ VitePress扩展语法
### 1. 自定义容器
```markdown
::: theorem 重要定理
这是一个重要的数学定理，需要特别注意。
**证明：**
假设...（证明过程）
**结论：**
因此，定理成立。
:::
::: example 示例代码
```python
def example():
return "这是一个示例":::
### 2. 组件集成
```markdown
<!-- 使用Vue组件 -->
<ClientOnly>
<InteractiveDemo />
</ClientOnly>
<!-- 使用自定义组件 -->
<PostList />
<TagCloud />
<CommentSection />3. 页面布局
markdown
---
layout: doc
aside: true
---
# 文档页面
这是一个带有侧边栏的文档页面。📚 最佳实践
1. 文件组织
docs/
├── _assets/ # 静态资源
│ ├── images/ # 图片文件
│ ├── videos/ # 视频文件
│ └── files/ # 其他文件
├── posts/ # 文章目录
│ ├── 2024-01-15-post-title.md
│ └── 2024-01-20-another-post.md
└── index.md # 首页2. 命名规范
markdown
<!-- 文件名 -->
2024-01-15-vue3-composition-api-guide.md
<!-- 图片文件名 -->
vue3-composition-api-diagram.png
vue3-composition-api-screenshot.png
<!-- 视频文件名 -->
vue3-composition-api-demo.mp4
vue3-composition-api-tutorial.mp43. 内容结构
markdown
---
title: "文章标题"
description: "文章描述"
date: 2024-01-15
author: "作者名"
tags: ["标签1", "标签2"]
category: "分类"
---
# 文章标题
## 引言
文章开头，简要介绍内容...
## 主要内容
详细内容...
## 总结
文章总结...
## 参考资料
- [链接1](url1)
- [链接2](url2)🎯 总结
通过掌握这些Markdown写作技巧，您可以：
- 创建专业文档 - 使用标准语法和最佳实践
- 增强视觉效果 - 合理使用图片、视频和表格
- 提升阅读体验 - 清晰的结构和格式
- 优化SEO效果 - 合理的标题层级和内容组织
- 扩展功能 - 利用VitePress的扩展语法
记住，好的Markdown文档不仅要内容准确，还要结构清晰、易于阅读。持续练习和改进，您的写作水平一定会不断提升！