博客功能演示：Markdown 与 MDX 渲染效果一览

前言

这篇文章是 zcblog 的「功能演示页」，集中展示博客支持的全部渲染能力。如果你是新读者，可以通过这篇文章快速了解本博客的排版风格；如果你是主题开发者，这篇文章可以作为配置是否正常的检验标准。

下面按功能模块逐一展示，每个模块都有实际渲染示例。

Mermaid 图表

本博客支持 Mermaid 语法，可以在文章里直接画流程图、时序图、类图等。

流程图

一个简单的部署流程：

flowchart TD
    A[开发者推送代码] --> B{GitHub Actions}
    B -->|测试通过| C[构建 Docker 镜像]
    B -->|测试失败| D[通知开发者修复]
    C --> E[推送到镜像仓库]
    E --> F[服务器拉取新镜像]
    F --> G[重启容器]
    G --> H[健康检查]
    H -->|通过| I[✅ 部署完成]
    H -->|失败| J[⏪ 自动回滚]
    J --> F

时序图

OAuth 2.0 授权码流程：

sequenceDiagram
    actor U as 用户
    participant B as 浏览器
    participant C as 第三方应用
    participant A as 授权服务器

    U->>B: 点击「GitHub 登录」
    B->>A: GET /authorize?client_id=xxx
    A->>U: 显示授权页面
    U->>A: 确认授权
    A->>B: 302 重定向到 callback?code=xxx
    B->>C: 发送 code
    C->>A: POST /token (code + secret)
    A->>C: access_token + refresh_token
    C->>U: 登录成功，返回用户信息

代码块

支持语法高亮，标注语言后自动着色。以下展示几种常用语言。

# Python: 装饰器示例
import time
from functools import wraps


def retry(max_attempts: int = 3, delay: float = 1.0):
    """失败自动重试的装饰器"""
    def decorator(func):
        @wraps(func)
        def wrapper(*args, **kwargs):
            for attempt in range(max_attempts):
                try:
                    return func(*args, **kwargs)
                except Exception as e:
                    if attempt == max_attempts - 1:
                        raise
3 collapsed lines
                    time.sleep(delay * (attempt + 1))
        return wrapper
    return decorator
# YAML: Docker Compose 配置
version: "3.8"
services:
  nginx-proxy-manager:
    image: jc21/nginx-proxy-manager:latest
    container_name: npm
    restart: unless-stopped
    ports:
      - "80:80"
      - "443:443"
      - "81:81"
    volumes:
      - ./data:/data
      - ./letsencrypt:/etc/letsencrypt
# Shell: 一键部署脚本
#!/bin/bash
set -e


echo "🔍 检查 Docker 环境..."
docker version > /dev/null 2>&1 || { echo "❌ 请先安装 Docker"; exit 1; }


echo "📦 拉取镜像..."
docker pull jc21/nginx-proxy-manager:latest


echo "🚀 启动服务..."
docker compose up -d


echo "✅ 部署完成，访问 http://localhost:81 进入管理面板"
// Rust: 一个简单的 HTTP 健康检查函数
use reqwest;


async fn health_check(url: &str) -> Result<bool, reqwest::Error> {
    let resp = reqwest::get(url).await?;
    Ok(resp.status().is_success())
}

表格

表格适合参数说明、方案对比等场景。

参数说明表

参数类型必填默认值说明
max_attemptsint否3最大重试次数
delayfloat否1.0重试间隔（秒）
backoffbool否true是否启用指数退避
on_failurecallable否None失败回调函数

方案对比表

方案部署难度资源占用功能完整度推荐场景
Nginx Proxy Manager⭐ 简单低⭐⭐⭐个人 / 小团队
Traefik⭐⭐ 中等低⭐⭐⭐⭐容器化环境
Caddy⭐ 简单低⭐⭐⭐自动 HTTPS
Nginx 手写配置⭐⭐⭐ 复杂最低⭐⭐⭐⭐⭐极客 / 高性能

Callout 容器

本博客支持四种 Callout 容器，用于在文章中突出不同性质的信息。

图片引用

[图：Mermaid 渲染效果截图 - 博客实际展示的流程图样式]

[图：Callout 容器在移动端和桌面端的对比效果]

数学公式

本博客支持 LaTeX 数学公式，由 KaTeX 渲染（构建时预渲染，比 MathJax 客户端渲染更快）。

行内公式：E=mc2E = mc^2，时间复杂度 O(nlog⁡n)O(n \log n)。

块级公式：

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

贝叶斯定理：

P(A∣B)=P(B∣A)⋅P(A)P(B)P(A|B) = \frac{P(B|A) \cdot P(A)}{P(B)}

PlantUML 图表

PlantUML 是一种用纯文本描述 UML 图的语言，本博客通过 remark 插件支持。适合画类图、组件图、部署图等。

类图示例

PlantUML diagram

组件图示例

PlantUML diagram

Chart.js 图表

使用 chart:类型 语法嵌入 Chart.js 图表，支持 bar、line、pie、doughnut、radar 等类型。

柱状图

饼图

Markmap 思维导图

用 Markdown 大纲语法直接生成交互式思维导图。

常见问题（FAQ）

为什么有些 Mermaid 图不显示？

检查 frontmatter 的 mermaid 字段是否设为 true。在 .md 文件中默认是 false，需要手动开启。

代码块怎么指定语言？

在三个反引号后面直接写语言名称即可：```python、```yaml、```bash。如果不写语言名，代码块不会有语法高亮。

Callout 容器可以嵌套吗？

不建议嵌套。Callout 设计为独立的提示单元，嵌套会导致样式错乱。如果需要多层信息，用多个独立 Callout 间隔排列。

图片路径怎么写？

封面图：../../assets/coverimage/xxx.png

正文图片：/assets/note/xxx.png

路径是相对于文章文件位置的，封面图需要回退两级目录。

这篇文章的源码在哪里？

文件位于： /Users/chowcong/Documents/WebSiteCode/zcblog/src/content/article/blog-gong-neng-yan-shi.mdx

你可以直接查看源码对比渲染效果，所有功能点都有完整示例。

PlantUML 图不显示？

PlantUML 是 remark 插件，不需要在 frontmatter 开关。如果图不显示，检查 @startuml 和 @enduml 标记是否正确，以及 plantuml.com 服务是否可访问（图片由远程服务渲染）。

Chart.js 图表语法是什么？

使用 ```chart:类型 语法，类型支持 bar、line、pie、doughnut、radar 等。代码块内容是 Chart.js 格式的 JSON 数据。

Markmap 和 Mermaid 有什么区别？

Mermaid 适合画流程图、时序图等结构化图表；Markmap 适合用大纲文本生成思维导图，语法就是普通 Markdown 的标题和列表。