← 返回技术文章

Markdown 渲染测试

测试本博客的Markdown渲染效果。


1. 标题

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

2. 段落与换行

这是第一段。

这是第二段。
这一行和上一行之间有一个 硬换行(在行尾加两个空格)。


3. 强调

斜体
斜体(另一种写法)
粗体
粗体(另一种写法)
粗斜体
删除线


4. 列表

  1. 有序列表项 1
  2. 有序列表项 2
    1. 子项 2.1
    2. 子项 2.2

5. 引用

这是一级引用

这是二级引用

这是三级引用


6. 链接与图片

这是一个 普通链接 [1]

这是一个带标题的链接 Example[2]

行内图片示例[3]
lenna.jpg

内部链接示例:
跳转到参考文献


7.代码测试

JavaScript代码

function hello() {
  console.log("Hello World");
  return true;
}

Python代码

def hello():
    print("Hello World")
    return True

简单代码

这是一个简单的代码块
没有指定语言

ls -a

8LaTeX公式测试

行内公式

测试代码

行内公式使用单个美元符号包裹,例如:$E = mc^2$ 是爱因斯坦的质能方程。

另一个例子是二次方程的求根公式:$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$

渲染效果

行内公式使用单个美元符号包裹,例如:E=mc2E = mc^2 是爱因斯坦的质能方程。

另一个例子是二次方程的求根公式:x=b±b24ac2ax = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

块级公式

块级公式使用两个美元符号包裹,会单独成行并居中显示:

测试代码

$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

渲染效果
ex2dx=π\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

这是高斯积分公式。

矩阵表示

测试代码

$$
A =
\begin{bmatrix}
a_{11} & a_{12} & \dots & a_{1n} \\
a_{21} & a_{22} & \dots & a_{2n} \\
\vdots & \vdots & \ddots & \vdots \\
a_{m1} & a_{m2} & \dots & a_{mn}
\end{bmatrix}, \quad
B =
\begin{bmatrix}
b_{11} & b_{12} & \dots & b_{1p} \\
b_{21} & b_{22} & \dots & b_{2p} \\
\vdots & \vdots & \ddots & \vdots \\
b_{n1} & b_{n2} & \dots & b_{np}
\end{bmatrix}
$$

矩阵乘积 \(C = A B\) 为:

$$
C =
\begin{bmatrix}
\sum_{k=1}^{n} a_{1k} b_{k1} & \sum_{k=1}^{n} a_{1k} b_{k2} & \dots & \sum_{k=1}^{n} a_{1k} b_{kp} \\
\sum_{k=1}^{n} a_{2k} b_{k1} & \sum_{k=1}^{n} a_{2k} b_{k2} & \dots & \sum_{k=1}^{n} a_{2k} b_{kp} \\
\vdots & \vdots & \ddots & \vdots \\
\sum_{k=1}^{n} a_{mk} b_{k1} & \sum_{k=1}^{n} a_{mk} b_{k2} & \dots & \sum_{k=1}^{n} a_{mk} b_{kp}
\end{bmatrix}
$$

矩阵相乘:
$$
\begin{bmatrix}
1 & 2 \\
3 & 4
\end{bmatrix}
\times
\begin{bmatrix}
5 & 6 \\
7 & 8
\end{bmatrix}
\;=\;
\begin{bmatrix}
? & ? \\
? & ?
\end{bmatrix}
$$

渲染效果
A=[a11a12a1na21a22a2nam1am2amn],B=[b11b12b1pb21b22b2pbn1bn2bnp]A = \begin{bmatrix} a_{11} & a_{12} & \dots & a_{1n} \\ a_{21} & a_{22} & \dots & a_{2n} \\ \vdots & \vdots & \ddots & \vdots \\ a_{m1} & a_{m2} & \dots & a_{mn} \end{bmatrix}, \quad B = \begin{bmatrix} b_{11} & b_{12} & \dots & b_{1p} \\ b_{21} & b_{22} & \dots & b_{2p} \\ \vdots & \vdots & \ddots & \vdots \\ b_{n1} & b_{n2} & \dots & b_{np} \end{bmatrix}

矩阵乘积 C=ABC = A B 为:

C=[k=1na1kbk1k=1na1kbk2k=1na1kbkpk=1na2kbk1k=1na2kbk2k=1na2kbkpk=1namkbk1k=1namkbk2k=1namkbkp]C = \begin{bmatrix} \sum_{k=1}^{n} a_{1k} b_{k1} & \sum_{k=1}^{n} a_{1k} b_{k2} & \dots & \sum_{k=1}^{n} a_{1k} b_{kp} \\ \sum_{k=1}^{n} a_{2k} b_{k1} & \sum_{k=1}^{n} a_{2k} b_{k2} & \dots & \sum_{k=1}^{n} a_{2k} b_{kp} \\ \vdots & \vdots & \ddots & \vdots \\ \sum_{k=1}^{n} a_{mk} b_{k1} & \sum_{k=1}^{n} a_{mk} b_{k2} & \dots & \sum_{k=1}^{n} a_{mk} b_{kp} \end{bmatrix}

矩阵相乘:
[1234]×[5678]  =  [????]\begin{bmatrix} 1 & 2 \\ 3 & 4 \end{bmatrix} \times \begin{bmatrix} 5 & 6 \\ 7 & 8 \end{bmatrix} \;=\; \begin{bmatrix} ? & ? \\ ? & ? \end{bmatrix}

常用数学符号

测试代码

- 求和:$\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$
- 积分:$\int_{a}^{b} f(x) dx$
- 极限:$\lim_{x \to 0} \frac{\sin x}{x} = 1$
- 偏导数:$\frac{\partial f}{\partial x}$

渲染效果

复杂公式示例

麦克斯韦方程组中的第一个方程:
测试代码

$$
\nabla \cdot \mathbf{E} = \frac{\rho}{\varepsilon_0}
$$

渲染效果
E=ρε0\nabla \cdot \mathbf{E} = \frac{\rho}{\varepsilon_0}

测试代码

标量场论的拉格朗日量:

$$
\mathcal{L} = \frac{1}{2} (\partial_\mu \phi)^2 - \frac{1}{2} m^2 \phi^2 - \frac{\lambda}{4!} \phi^4
$$

渲染效果
L=12(μϕ)212m2ϕ2λ4!ϕ4\mathcal{L} = \frac{1}{2} (\partial_\mu \phi)^2 - \frac{1}{2} m^2 \phi^2 - \frac{\lambda}{4!} \phi^4

Mermaid流程图测试

Mermaid是一个基于JavaScript的图表绘制工具,它允许你在Markdown中使用简单的文本语法来创建各种图表。本文将介绍Mermaid的基本用法。

流程图

流程图是最常用的图表类型之一:

graph TD A[开始] --> B{条件判断} B -->|是| C[处理流程1] B -->|否| D[处理流程2] C --> E[结束] D --> E

序列图

序列图用于展示对象之间的交互顺序:

sequenceDiagram participant 用户 participant 网站 participant 数据库 用户->>网站: 提交请求 网站->>数据库: 查询数据 数据库-->>网站: 返回结果 网站-->>用户: 显示页面

类图

类图用于展示面向对象设计中的类关系:

classDiagram class Animal { +String name +int age +eat() +sleep() } class Dog { +bark() } class Cat { +meow() } Animal <|-- Dog Animal <|-- Cat

状态图

状态图用于展示对象的状态转换:

stateDiagram-v2 [*] --> 待机 待机 --> 运行: 启动命令 运行 --> 暂停: 暂停命令 暂停 --> 运行: 继续命令 运行 --> 待机: 停止命令 暂停 --> 待机: 停止命令

甘特图

甘特图用于项目进度管理:

gantt title 项目开发计划 dateFormat YYYY-MM-DD section 设计 需求分析 :a1, 2024-01-01, 7d 系统设计 :after a1, 14d section 开发 前端开发 :2024-01-15, 21d 后端开发 :2024-01-22, 21d section 测试 单元测试 :2024-02-12, 14d 集成测试 :2024-02-19, 7d

饼图

饼图用于展示数据比例:

pie title 编程语言使用比例 "JavaScript" : 45 "Python" : 25 "Java" : 15 "其他" : 15

使用技巧

  1. 语法简洁:Mermaid使用简单的文本语法,易于学习和使用
  2. 实时预览:支持实时渲染,修改后立即看到效果
  3. 多种图表:支持流程图、序列图、类图、状态图、甘特图、饼图等
  4. 主题定制:可以通过CSS自定义图表样式

Mermaid是一个非常强大的工具,特别适合在技术文档中使用。通过简单的文本描述,就能生成专业的图表。

参考文献


  1. Berners-Lee, T. (1989). Information Management: A Proposal. CERN. ↩︎

  2. Gruber, J. (2004). Markdown Syntax Documentation. Daring Fireball. ↩︎

  3. W3C. (2010). Web Content Accessibility Guidelines (WCAG) 2.0. W3C Recommendation. ↩︎