Markdown 扩展语法示例

本文展示了 ShuFeiCat 主题支持的所有 Markdown 扩展语法，帮助你快速上手。

使用说明

1. Mermaid 图表

使用 mermaid 代码块可以绘制流程图、时序图、甘特图等。
示例代码：

```mermaid
graph TD
    A[开始] --> B[结束]
```

显示效果：

graph TD
    A[开始] --> B[结束]

2. KaTeX 数学公式

支持行内公式与块级公式，基于 KaTeX 引擎极速渲染。
示例代码：

• 行内公式：$E=mc^2$
• 块级公式：$$\frac{-b \pm \sqrt{b^2-4ac}}{2a}$$
  显示效果：
• 行内公式：$E=mc^2$

• 块级公式：

  $$\frac{-b \pm \sqrt{b^2-4ac}}{2a}$$

  3. ECharts 交互图表

  使用 echarts 代码块可以渲染功能丰富的交互式数据可视化图表。
  示例代码：

  ```echarts
  {"xAxis":{"type":"category","data":["A","B","C"]},"yAxis":{"type":"value"},"series":[{"data":[120,200,150],"type":"bar"}]}
  ```

  显示效果：

  {"xAxis":{"type":"category","data":["A","B","C"]},"yAxis":{"type":"value"},"series":[{"data":[120,200,150],"type":"bar"}]}

  ---

  4. 图片大小

  使用 |宽x高 控制图片尺寸，支持像素和百分比：

• 固定宽度 300px：![图片描述|300](url)
• 指定宽高：![图片描述|300x200](url)

• 百分比宽度：![图片描述|50%](url)

  5. 图片对齐

  在 alt 末尾加 #left、#center、#right 控制对齐：

• 左浮动：![图片描述#left](url)
• 居中：![图片描述#center](url)

• 右浮动：![图片描述#right](url)

  大小和对齐可以组合使用：![图片描述|200#right](url)

  6. 图片标题

  alt 文本会自动显示为图片下方的标题（figcaption）：

  写法与普通图片一样：![这是一张风景图](url)，alt 文本即为标题。

  ---

  7. 高亮文本

  使用双等号包裹文字即可高亮：
  Typecho 是一款轻量级开源博客程序，它简洁、稳定，深受开发者喜爱。

  支持中文高亮和English Highlight，也可以加粗高亮组合使用。

  8. 任务列表

• 安装 Typecho
• 启用 ShuFeiCat 主题
• 开启 Markdown 扩展语法
• 编写第一篇文章
• 优化 SEO 设置

• [ ] 添加友情链接

  9. 提示框

  在引用块首行使用 [!类型] 创建提示框，支持 5 种类型：

  [!tip] 小贴士
  使用 ![图片|50%](url) 可以让图片宽度自适应容器的一半。
  [!note] 备注
  所有扩展语法都兼容标准 Markdown，不会影响已有文章的渲染。
  [!info] 信息
  你可以在后台"外观设置 → 功能增强"中一键开启或关闭 Markdown 扩展。
  [!warning] 注意
  图片对齐语法 #left 和 #right 在移动端会自动取消浮动，保证阅读体验。
  [!danger] 警告
  修改主题文件前请务必备份，避免数据丢失！

  ---

  10. 折叠区块

  使用 [details:标题] 创建可折叠的内容区域：

  点击查看代码示例

  // 在 functions.php 中注册钩子
  \Typecho\Plugin::factory('Widget\Base\Contents')
      ->contentEx = 'shufei_markdown_ext_filter';

  常见问题

  Q: 扩展语法和标准 Markdown 冲突吗？
  A: 不会。所有扩展都基于标准语法的自然变体，原有内容不受影响。

  Q: 可以组合使用吗？
  A: 可以！比如图片大小和对齐可以同时使用。

  ---

  11. 图片懒加载

  所有图片自动添加 loading="lazy" 属性，无需手动设置，提升页面加载速度。