Markdown 语法完整指南

这是一个完整的Markdown语法参考指南，展示了在Hexo博客中可以使用的各种Markdown元素和扩展功能。

📝 文本格式

基础格式

**粗体文本**
*斜体文本*
***粗斜体文本***
~~删除线文本~~
<u>下划线文本</u>
<mark>高亮文本</mark>

效果展示：
粗体文本
斜体文本
粗斜体文本
删除线文本
下划线文本
高亮文本

引用

> 这是一级引用
>> 这是二级引用
>>> 这是三级引用

效果展示：

这是一级引用

这是二级引用

这是三级引用

📋 列表

无序列表

- 项目一
  - 子项目1.1
    - 子项目1.1.1
  - 子项目1.2
- 项目二
* 项目三

效果展示：

• 项目一
  • 子项目1.1
    • 子项目1.1.1
  • 子项目1.2
• 项目二

• 项目三

有序列表

1. 第一项
2. 第二项
   1. 子项2.1
   2. 子项2.2
3. 第三项

效果展示：

1. 第一项
2. 第二项
   1. 子项2.1
   2. 子项2.2
3. 第三项

任务列表

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

效果展示：

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

🔗 链接和图片

链接

[内联链接](https://hexo.io)
[引用链接][1]
[邮箱链接](mailto:example@email.com)

[1]: https://hexo.io

效果展示：
内联链接
引用链接
邮箱链接

图片

![替代文本](https://hexo.io/logo.svg "Hexo Logo")

效果展示：

📊 表格

基础表格

| 列1 | 列2 | 列3 |
|-----|-----|-----|
| 数据1 | 数据2 | 数据3 |
| 数据4 | 数据5 | 数据6 |

对齐表格

| 左对齐 | 居中对齐 | 右对齐 |
|:-------|:-------:|-------:|
| 内容1 | 内容2 | 内容3 |
| 长内容 | 短 | 很长的内容 |

效果展示：

左对齐	居中对齐	右对齐
内容1	内容2	内容3
长内容	短	很长的内容

🎨 代码高亮

行内代码

这是一段行内代码：`console.log('Hello World')`

效果展示：
这是一段行内代码：console.log('Hello World')

代码块

Bash/Shell

#!/bin/bash
echo "Hello Hexo Blog!"
# 创建新文章
hexo new post "文章标题"
# 启动开发服务器
hexo server

Python

import matplotlib.pyplot as plt
import numpy as np

# 创建数据
x = np.linspace(0, 10, 100)
y = np.sin(x)

# 绘制图表
plt.figure(figsize=(10, 6))
plt.plot(x, y, label='sin(x)', linewidth=2)
plt.xlabel('x')
plt.ylabel('y')
plt.title('正弦函数图表')
plt.legend()
plt.grid(True, alpha=0.3)
plt.show()

JavaScript/Node.js

// 异步函数示例
class BlogManager {
    constructor() {
        this.posts = [];
        this.categories = new Set();
    }

    async fetchPosts() {
        try {
            const response = await fetch('/api/posts');
            this.posts = await response.json();
            return this.posts;
        } catch (error) {
            console.error('获取文章失败:', error);
            throw error;
        }
    }

    filterByCategory(category) {
        return this.posts.filter(post =>
            post.categories.includes(category)
        );
    }

    async createPost(postData) {
        const response = await fetch('/api/posts', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(postData)
        });

        if (!response.ok) {
            throw new Error('创建文章失败');
        }

        return response.json();
    }
}

// 使用示例
const blog = new BlogManager();
blog.fetchPosts()
    .then(posts => console.log(`获取到 ${posts.length} 篇文章`))
    .catch(error => console.error(error));

YAML配置文件

# Kubernetes Deployment 配置
apiVersion: apps/v1
kind: Deployment
metadata:
  name: blog-deployment
  labels:
    app: blog
    version: v1.0
spec:
  replicas: 3
  strategy:
    type: RollingUpdate
    rollingUpdate:
      maxSurge: 1
      maxUnavailable: 0
  selector:
    matchLabels:
      app: blog
  template:
    metadata:
      labels:
        app: blog
        version: v1.0
    spec:
      containers:
      - name: blog-container
        image: myblog:latest
        ports:
        - containerPort: 80
          protocol: TCP
        env:
        - name: NODE_ENV
          value: "production"
        - name: PORT
          value: "80"
        resources:
          requests:
            memory: "256Mi"
            cpu: "250m"
          limits:
            memory: "512Mi"
            cpu: "500m"
        livenessProbe:
          httpGet:
            path: /health
            port: 80
          initialDelaySeconds: 30
          periodSeconds: 10
        readinessProbe:
          httpGet:
            path: /ready
            port: 80
          initialDelaySeconds: 5
          periodSeconds: 5

SQL查询示例

-- 复杂的数据库查询示例
WITH post_stats AS (
    SELECT
        p.id,
        p.title,
        p.created_at,
        COUNT(c.id) as comment_count,
        AVG(r.rating) as avg_rating,
        COUNT(DISTINCT v.id) as view_count
    FROM posts p
    LEFT JOIN comments c ON p.id = c.post_id
    LEFT JOIN ratings r ON p.id = r.post_id
    LEFT JOIN page_views v ON p.id = v.post_id
    WHERE p.status = 'published'
        AND p.created_at >= '2024-01-01'
    GROUP BY p.id, p.title, p.created_at
),
category_ranking AS (
    SELECT
        pc.post_id,
        c.name as category_name,
        COUNT(*) OVER (PARTITION BY c.name) as posts_in_category
    FROM post_categories pc
    JOIN categories c ON pc.category_id = c.id
)
SELECT
    ps.title,
    ps.created_at,
    ps.comment_count,
    ps.avg_rating,
    ps.view_count,
    cr.category_name,
    cr.posts_in_category,
    ROW_NUMBER() OVER (ORDER BY ps.view_count DESC, ps.avg_rating DESC) as popularity_rank
FROM post_stats ps
LEFT JOIN category_ranking cr ON ps.id = cr.post_id
WHERE ps.comment_count > 0 OR ps.avg_rating IS NOT NULL
ORDER BY popularity_rank
LIMIT 20;

📈 Mermaid 图表

本博客支持Mermaid图表，可以创建流程图、时序图、甘特图等多种图表。

流程图

{% mermaid %}
graph TD
    A[开始] --> B{编写Markdown}
    B -->|完成| C[预览效果]
    B -->|继续编辑| D[修改内容]
    D --> B
    C --> E{满意?}
    E -->|是| F[发布文章]
    E -->|否| D
    F --> G[结束]
{% endmermaid %}

效果展示：

graph TD A[开始] --> B{编写Markdown} B -->|完成| C[预览效果] B -->|继续编辑| D[修改内容] D --> B C --> E{满意?} E -->|是| F[发布文章] E -->|否| D F --> G[结束]

时序图

{% mermaid %}
sequenceDiagram
    participant U as 用户
    participant B as 博客系统
    participant D as 数据库
    participant C as CDN

    U->>B: 访问文章页面
    B->>D: 查询文章内容
    D-->>B: 返回Markdown数据
    B->>B: 解析Markdown内容
    B->>C: 获取静态资源
    C-->>B: 返回CSS/JS
    B-->>U: 渲染完整页面
    U->>B: 互动操作（点赞、评论）
    B->>D: 更新数据库
    D-->>B: 确认更新
    B-->>U: 更新页面显示
{% endmermaid %}

效果展示：

sequenceDiagram participant U as 用户 participant B as 博客系统 participant D as 数据库 participant C as CDN U->>B: 访问文章页面 B->>D: 查询文章内容 D-->>B: 返回Markdown数据 B->>B: 解析Markdown内容 B->>C: 获取静态资源 C-->>B: 返回CSS/JS B-->>U: 渲染完整页面 U->>B: 互动操作（点赞、评论） B->>D: 更新数据库 D-->>B: 确认更新 B-->>U: 更新页面显示

类图

{% mermaid %}
classDiagram
    class Post {
        +String id
        +String title
        +String content
        +Date createdAt
        +Date updatedAt
        +Array~String~ tags
        +String status
        +save() Boolean
        +publish() Boolean
        +archive() Boolean
        +addTag(String tag) void
    }

    class Category {
        +String id
        +String name
        +String description
        +String slug
        +Array~Post~ posts
        +addPost(Post post) void
        +removePost(Post post) void
        +getPostCount() Number
    }

    class User {
        +String id
        +String username
        +String email
        +Array~Post~ posts
        +Date lastLoginAt
        +createPost(PostData data) Post
        +editPost(String postId, PostData data) Post
        +deletePost(String postId) Boolean
    }

    User "1" -- "*" Post : creates >
    Post "*" -- "1" Category : belongs to >
{% endmermaid %}

效果展示：

classDiagram class Post { +String id +String title +String content +Date createdAt +Date updatedAt +Array~String~ tags +String status +save() Boolean +publish() Boolean +archive() Boolean +addTag(String tag) void } class Category { +String id +String name +String description +String slug +Array~Post~ posts +addPost(Post post) void +removePost(Post post) void +getPostCount() Number } class User { +String id +String username +String email +Array~Post~ posts +Date lastLoginAt +createPost(PostData data) Post +editPost(String postId, PostData data) Post +deletePost(String postId) Boolean } User "1" -- "*" Post : creates > Post "*" -- "1" Category : belongs to >

🎯 特殊元素

分隔线

---
***
___

效果展示：

---

---

---

脚注

这是一个脚注测试[^1]。

[^1]: 这是脚注的详细说明内容

效果展示：
这是一个脚注测试^1。

键盘快捷键

<kbd>Ctrl</kbd> + <kbd>C</kbd> 复制
<kbd>Ctrl</kbd> + <kbd>V</kbd> 粘贴
<kbd>Alt</kbd> + <kbd>F4</kbd> 关闭窗口

效果展示：
Ctrl + C 复制
Ctrl + V 粘贴
Alt + F4 关闭窗口

Emoji表情

🎉 庆祝
🚀 启动
💻 编程
📱 移动端
🌟 星星
🎨 创意
📚 文档

效果展示：
🎉 庆祝
🚀 启动
💻 编程
📱 移动端
🌟 星星
🎨 创意
📚 文档

🔧 高级功能

内联HTML

<div style="background: #f0f8ff; padding: 15px; border-radius: 5px; border-left: 4px solid #007bff;">
  <strong>提示：</strong> 这是一个使用HTML创建的信息框
</div>

<details>
  <summary>点击展开详细内容</summary>

  这里是折叠起来的详细内容，可以包含任何Markdown元素：

  - 列表项1
  - 列表项2
  - `代码示例`

  > 引用内容
</details>

效果展示：

提示： 这是一个使用HTML创建的信息框

点击展开详细内容

这里是折叠起来的详细内容，可以包含任何Markdown元素：

• 列表项1
• 列表项2
• 代码示例

引用内容

数学公式（需要额外配置）

如果启用了数学公式渲染插件，可以使用以下语法：

行内公式：$E = mc^2$

块级公式：
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

矩阵公式：
$$
\begin{pmatrix}
a & b & c \\
d & e & f \\
g & h & i
\end{pmatrix}
$$

📱 响应式表格和代码

本博客支持响应式设计，表格和代码块在不同设备上都能良好显示。

移动端优化

• 表格支持横向滚动
• 代码块支持横向滚动
• Mermaid图表自动调整大小
• 图片自适应屏幕宽度

🚀 最佳实践

文章结构建议

1. 使用清晰的标题层级（H1 → H2 → H3）
2. 适当使用分隔线分隔不同章节
3. 为图片添加alt文本提升可访问性
4. 使用任务列表跟踪待办事项
5. 合理使用Mermaid图表展示复杂概念

代码高亮建议

1. 始终指定语言类型以获得正确的语法高亮
2. 添加有意义的注释解释代码逻辑
3. 保持代码片段简短，专注于关键部分
4. 使用行号（在配置中启用）便于引用

SEO优化建议

1. 使用语义化的HTML标签
2. 为图片添加描述性alt文本
3. 合理使用标题标签（每个页面一个H1）
4. 创建有意义的链接文本
5. 使用结构化数据（如需要）

---

💡 总结

这个Markdown指南涵盖了在Hexo博客中可以使用的：

• ✅ 基础语法：文本格式、列表、引用
• ✅ 高级元素：表格、代码、链接、图片
• ✅ 扩展功能：Mermaid图表、脚注、键盘样式
• ✅ 响应式设计：移动端友好
• ✅ 代码高亮：多种编程语言支持

通过合理使用这些Markdown元素，你可以创建出内容丰富、格式美观的博客文章！

💡 提示：将此页面加入书签，作为编写博客文章的快速参考指南。