LaTeX 与 Mermaid 渲染测试

这篇文章用于测试博客中的 LaTeX 数学公式 和 Mermaid 图表 是否可以正常渲染。

---

1. 行内 LaTeX

这是一个行内公式：$E = mc^2$。

再来一个行内公式：当 $a^2 + b^2 = c^2$ 时，三角形是直角三角形。

---

2. 块级 LaTeX

下面是一个块级公式：

$$\int_0^1 x^2 \, dx = \frac{1}{3}$$

---

3. 分式、根号与上下标

$$f(x) = \frac{1}{\sqrt{2\pi\sigma^2}} e^{-\frac{(x-\mu)^2}{2\sigma^2}}$$

---

4. 求和与极限

$$\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$$ $$\lim_{x \to 0} \frac{\sin x}{x} = 1$$

---

5. 多行对齐公式

$$\begin{aligned} (a+b)^2 &= (a+b)(a+b) \\ &= a^2 + ab + ba + b^2 \\ &= a^2 + 2ab + b^2 \end{aligned}$$

---

6. 矩阵

$$A = \begin{bmatrix} 1 & 2 & 3 \\ 4 & 5 & 6 \\ 7 & 8 & 9 \end{bmatrix}$$

---

7. Mermaid 流程图

flowchart TD
    A[开始] --> B{LaTeX 是否正常渲染?}
    B -- 是 --> C[检查 Mermaid]
    B -- 否 --> D[检查 remark-math / rehype-katex 配置]
    C --> E{Mermaid 是否正常渲染?}
    E -- 是 --> F[博客渲染正常]
    E -- 否 --> G[检查 Mermaid 初始化逻辑]

---

8. Mermaid 时序图

sequenceDiagram
    participant User as 用户
    participant Blog as 博客页面
    participant Markdown as Markdown 渲染器
    participant Mermaid as Mermaid

    User->>Blog: 打开文章
    Blog->>Markdown: 渲染 Markdown
    Markdown->>Mermaid: 处理 mermaid 代码块
    Mermaid-->>Blog: 返回 SVG 图表
    Blog-->>User: 展示页面

---

9. Mermaid 类图

classDiagram
    class BlogPost {
        +string title
        +string content
        +Date date
        +render()
    }

    class MarkdownRenderer {
        +renderLatex()
        +renderMermaid()
    }

    class MermaidDiagram {
        +string type
        +generateSvg()
    }

    BlogPost --> MarkdownRenderer
    MarkdownRenderer --> MermaidDiagram

---

10. Mermaid 状态图

stateDiagram-v2
    [*] --> Draft
    Draft --> Published: 发布文章
    Published --> Updated: 修改内容
    Updated --> Published: 重新发布
    Published --> Archived: 归档
    Archived --> [*]

---

11. 检查结论

如果你看到的是：

• 数学公式被漂亮地排版出来，而不是源码；
• Mermaid 图表变成 SVG/图形，而不是普通代码块；

那么说明 LaTeX 和 Mermaid 都已经正常工作。

如果你看到类似这样的代码块标题：

math
Vitesse Dark
Playground

或者：

mermaid
Vitesse Dark
Playground

那说明它们仍然被代码高亮组件处理了，还没有进入 LaTeX / Mermaid 渲染流程。