【Markdown语法大全】第四课：高级应用 - HTML 嵌入、数学公式与图表

更多相关课程在图亚AI课程，敬请期待!

一、知识点讲解

1. HTML 嵌入
   • 可直接在 Markdown 中使用 HTML 标签（如 <div>、<span>、<font>）实现更复杂排版。
   • 注意：某些平台会过滤不安全 HTML。
2. 数学公式 （需引擎支持，如 MathJax、KaTeX）
   • 行内公式：$E=mc^2$
   • 块级公式：$$ 公式 $$
   • 支持 LaTeX 语法。
3. 图表绘制 （Mermaid 等）
   • 使用代码块标记语言为 mermaid，可绘制流程图、时序图、甘特图等。
   • 示例：流程图、时序图。
4. 目录生成
   • 部分平台支持 [TOC] 自动生成目录，或手动用锚点链接创建。

二、案例演示

Markdown 源码：

## HTML 嵌入示例
<div style="color: red; background: yellow; padding: 10px;">
  这是一个用 HTML 定义的红色文字、黄色背景的区块。
</div>

## 数学公式
行内公式：爱因斯坦的质能方程 $E=mc^2$。

块级公式：
$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$

## Mermaid 流程图
```mermaid
graph TD;
    A[开始] --> B{判断};
    B -->|条件成立| C[执行];
    B -->|条件不成立| D[结束];
    C --> D;

手动目录（锚点链接）

• [跳转到 HTML 示例](#跳转到 HTML 示例)
• 跳转到数学公式

渲染效果：

HTML 嵌入示例

这是一个用 HTML 定义的红色文字、黄色背景的区块。

数学公式

行内公式：爱因斯坦的质能方程 E = m c 2 E=mc^2 E=mc2。

块级公式：

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

Mermaid 流程图

#mermaid-svg-Ys9T4UTAIB8MRmfk{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-Ys9T4UTAIB8MRmfk .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-Ys9T4UTAIB8MRmfk .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-Ys9T4UTAIB8MRmfk .error-icon{fill:#552222;}#mermaid-svg-Ys9T4UTAIB8MRmfk .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Ys9T4UTAIB8MRmfk .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-Ys9T4UTAIB8MRmfk .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Ys9T4UTAIB8MRmfk .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Ys9T4UTAIB8MRmfk .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-Ys9T4UTAIB8MRmfk .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Ys9T4UTAIB8MRmfk .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Ys9T4UTAIB8MRmfk .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Ys9T4UTAIB8MRmfk .marker.cross{stroke:#333333;}#mermaid-svg-Ys9T4UTAIB8MRmfk svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Ys9T4UTAIB8MRmfk p{margin:0;}#mermaid-svg-Ys9T4UTAIB8MRmfk .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-Ys9T4UTAIB8MRmfk .cluster-label text{fill:#333;}#mermaid-svg-Ys9T4UTAIB8MRmfk .cluster-label span{color:#333;}#mermaid-svg-Ys9T4UTAIB8MRmfk .cluster-label span p{background-color:transparent;}#mermaid-svg-Ys9T4UTAIB8MRmfk .label text,#mermaid-svg-Ys9T4UTAIB8MRmfk span{fill:#333;color:#333;}#mermaid-svg-Ys9T4UTAIB8MRmfk .node rect,#mermaid-svg-Ys9T4UTAIB8MRmfk .node circle,#mermaid-svg-Ys9T4UTAIB8MRmfk .node ellipse,#mermaid-svg-Ys9T4UTAIB8MRmfk .node polygon,#mermaid-svg-Ys9T4UTAIB8MRmfk .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Ys9T4UTAIB8MRmfk .rough-node .label text,#mermaid-svg-Ys9T4UTAIB8MRmfk .node .label text,#mermaid-svg-Ys9T4UTAIB8MRmfk .image-shape .label,#mermaid-svg-Ys9T4UTAIB8MRmfk .icon-shape .label{text-anchor:middle;}#mermaid-svg-Ys9T4UTAIB8MRmfk .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-Ys9T4UTAIB8MRmfk .rough-node .label,#mermaid-svg-Ys9T4UTAIB8MRmfk .node .label,#mermaid-svg-Ys9T4UTAIB8MRmfk .image-shape .label,#mermaid-svg-Ys9T4UTAIB8MRmfk .icon-shape .label{text-align:center;}#mermaid-svg-Ys9T4UTAIB8MRmfk .node.clickable{cursor:pointer;}#mermaid-svg-Ys9T4UTAIB8MRmfk .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-Ys9T4UTAIB8MRmfk .arrowheadPath{fill:#333333;}#mermaid-svg-Ys9T4UTAIB8MRmfk .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-Ys9T4UTAIB8MRmfk .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-Ys9T4UTAIB8MRmfk .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-Ys9T4UTAIB8MRmfk .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-Ys9T4UTAIB8MRmfk .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-Ys9T4UTAIB8MRmfk .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-Ys9T4UTAIB8MRmfk .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-Ys9T4UTAIB8MRmfk .cluster text{fill:#333;}#mermaid-svg-Ys9T4UTAIB8MRmfk .cluster span{color:#333;}#mermaid-svg-Ys9T4UTAIB8MRmfk div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-Ys9T4UTAIB8MRmfk .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-Ys9T4UTAIB8MRmfk rect.text{fill:none;stroke-width:0;}#mermaid-svg-Ys9T4UTAIB8MRmfk .icon-shape,#mermaid-svg-Ys9T4UTAIB8MRmfk .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-Ys9T4UTAIB8MRmfk .icon-shape p,#mermaid-svg-Ys9T4UTAIB8MRmfk .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-Ys9T4UTAIB8MRmfk .icon-shape .label rect,#mermaid-svg-Ys9T4UTAIB8MRmfk .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-Ys9T4UTAIB8MRmfk .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-Ys9T4UTAIB8MRmfk .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-Ys9T4UTAIB8MRmfk :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 条件成立
条件不成立
开始
判断
执行
结束

手动目录（锚点链接）

• [跳转到 HTML 示例](#跳转到 HTML 示例)
• 跳转到数学公式

三、课后总结

• HTML 嵌入可突破 Markdown 样式限制，但需注意兼容性。
• 数学公式用 $ 包裹，支持复杂 LaTeX 表达式。
• Mermaid 图表让文档可视化，需平台支持渲染。
• 锚点链接可用于手动创建目录。

小练习：写一篇包含数学公式（如二次方程求根公式）和一个 Mermaid 流程图的笔记，并用 HTML 给某段文字加背景色。

---