Markdown 使用指南
专为百万运营Pro网站和VitePress定制的Markdown使用指南
📑 目录
基本语法
标题
用法：使用 # 号表示标题级别，从 # 到 ###### 对应 H1 到 H6。
示例：
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题效果：
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
文本格式
用法：使用不同的标记符号来格式化文本。
示例：
**粗体文本**
*斜体文本*
***粗斜体文本***
~~删除线文本~~
`代码文本`效果： 粗体文本斜体文本粗斜体文本删除线文本代码文本
列表
无序列表
用法：使用 - 作为列表标记（本网站推荐风格）。
示例：
- 项目 1
- 子项目 1.1
- 子子项目 1.1.1
- 项目 2
- 子项目 2.1效果：
- 项目 1
- 子项目 1.1
- 子子项目 1.1.1
- 子项目 1.1
- 项目 2
- 子项目 2.1
有序列表
用法：使用数字加 . 作为列表标记。
示例：
1. 第一项
2. 第二项
3. 第三项
1. 子项 3.1
2. 子项 3.2效果：
- 第一项
- 第二项
- 第三项
- 子项 3.1
- 子项 3.2
链接
用法：使用 [链接文本](链接地址) 格式创建链接。
示例：
[内部链接](/01ai/04-ai-singing-video)
[外部链接](https://newmt.fun)
[带标题的链接](https://newmt.fun "这是链接标题")效果：
图片
用法：使用  格式插入图片。
示例：
效果： 
代码块
用法：使用三个反引号 ``` 包裹代码，并指定语言。
示例：
```javascript
function hello() {
console.log('Hello, Markdown!');
}效果：
function hello() {
console.log('Hello, Markdown!');
}表格
用法：使用 | 分隔单元格，使用 - 分隔表头和表格内容。
示例：
| 姓名 | 年龄 | 职业 |
|------|------|------|
| 张三 | 25 | 工程师 |
| 李四 | 30 | 设计师 |
| 王五 | 35 | 产品经理 |效果：
| 姓名 | 年龄 | 职业 |
|---|---|---|
| 张三 | 25 | 工程师 |
| 李四 | 30 | 设计师 |
| 王五 | 35 | 产品经理 |
引用
用法：使用 > 表示引用。
示例：
> 这是一段引用文本
>
> 这是引用的第二行效果：
这是一段引用文本
这是引用的第二行
分割线
用法：使用三个或更多的 -。
示例：
---效果：
VitePress 特有功能
代码块增强
用法：在代码块中添加行号、高亮和文件名。
示例：
```vue{1,3-5}[App.vue]
<template>
<div>Hello VitePress</div>
</template>
<script>
export default {
name: 'App'
}
</script>效果：
<template>
<div>Hello VitePress</div>
</template>
自定义容器
用法：使用 ::: 类型 和 ::: 包裹内容。
示例：
::: tip
这是一个提示信息
:::
::: warning
这是一个警告信息
:::
::: danger
这是一个危险警告
:::
::: details
这是一个可折叠的详情
点击展开查看更多内容
:::效果：
TIP
这是一个提示信息
WARNING
这是一个警告信息
DANGER
这是一个危险警告
Details
这是一个可折叠的详情 点击展开查看更多内容
数学公式
用法：使用 $ 包裹行内公式，$$ 包裹块级公式。
示例：
行内公式：$E=mc^2$
块级公式：
$$
\int_{a}^{b} f(x) dx
$$效果： 行内公式：$E=mc^2$
块级公式： $$ \int_{a}^{b} f(x) dx $$
图表支持
用法：使用 Mermaid 语法绘制图表。
示例：
```mermaid
graph TD
A[开始] --> B[处理]
B --> C{判断}
C -->|是| D[成功]
C -->|否| E[失败]
D --> F[结束]
E --> F效果：
graph TD
A[开始] --> B[处理]
B --> C{判断}
C -->|是| D[成功]
C -->|否| E[失败]
D --> F[结束]
E --> F本网站风格指南
标题格式
用法：
- 一级标题：使用
#，仅用于页面主标题 - 二级标题：使用
##，用于主要章节 - 三级标题：使用
###，用于子章节 - 四级及以下标题：尽量避免使用，保持层级清晰
示例：
# 页面主标题
## 主要章节
### 子章节内容组织
用法：
- 每个页面应有清晰的结构
- 使用目录导航（
[TOC]） - 合理使用分隔线（
---）区分内容 - 保持段落简短，提高可读性
示例：
# 文档标题
> 文档简介
## 目录
- [章节 1](#章节-1)
- [章节 2](#章节-2)
## 章节 1
内容...
---
## 章节 2
内容...视觉风格
用法：
- 使用 emoji 增强视觉效果
- 合理使用空行分隔内容
- 保持一致的缩进和格式
- 避免过度使用特殊格式
示例：
## 📚 资源推荐
- [VitePress 官方文档](https://vitepress.dev/)
- [Markdown 官方文档](https://daringfireball.net/projects/markdown/)实用技巧
快速创建文档结构
用法：使用模板快速创建文档结构。
示例：
# 文档标题
> 文档简介
## 目录
- [概述](#概述)
- [功能特点](#功能特点)
- [使用方法](#使用方法)
- [注意事项](#注意事项)
## 概述
## 功能特点
## 使用方法
## 注意事项
## 参考链接
- [相关链接 1](https://newmt.fun)
- [相关链接 2](https://newmt.fun)代码示例最佳实践
用法：提供完整的可运行示例，添加必要的注释。
示例：
// 计算斐波那契数列
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
// 使用示例
console.log(fibonacci(10)); // 输出: 55图片使用技巧
用法：使用相对路径引用图片，确保图片尺寸适中。
示例：
> 图：产品主界面截图链接管理
用法：使用语义化的链接文本，内部链接使用相对路径。
示例：
[AI唱歌视频](/01ai/04-ai-singing-video)
[新媒体运营](/03newmt/)常见问题
Q: 如何在 Markdown 中添加视频？
A：可以使用 HTML 嵌入或外部视频链接。
示例：
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>Q: 如何创建响应式布局？
A：可以使用 HTML 和 CSS 实现。
示例：
<div style="display: flex; flex-wrap: wrap; gap: 20px;">
<div style="flex: 1; min-width: 300px;">
<h3>左侧内容</h3>
<p>这是左侧的内容</p>
</div>
<div style="flex: 1; min-width: 300px;">
<h3>右侧内容</h3>
<p>这是右侧的内容</p>
</div>
</div>Q: 如何添加自定义样式？
A：可以使用 HTML 标签和内联样式。
示例：
<div style="background-color: #f0f0f0; padding: 15px; border-radius: 8px; margin: 20px 0;">
<h3 style="color: #333;">自定义样式</h3>
<p>这是一个带有自定义样式的内容块</p>
</div>Q: 如何优化 Markdown 性能？
A：
- 避免使用过多的复杂语法
- 合理组织内容结构
- 优化图片大小和数量
- 使用缓存策略
📚 资源推荐
- VitePress 官方文档 - 官方指南和API文档
- Markdown 官方文档 - Markdown创始人的官方文档
- GitHub Flavored Markdown - GitHub风格的Markdown扩展
- VS Code Markdown 插件 - 增强Markdown编辑体验
提示：本指南将持续更新，以适应网站的发展和 VitePress 的新特性。如有任何疑问或建议，请联系网站管理员。