Halo 2.x Markdown 渲染扩展

引言

各位小伙伴们好啊！今天来聊聊 Halo 2.x 的 Markdown 渲染扩展这个话题。说起来，我当初用 Halo 搭建博客的时候，最头疼的就是 Markdown 渲染的问题。默认的渲染器功能太 basic 了，写技术文章时想要插入个数学公式、画个流程图啥的，根本不支持。后来研究了一下，发现 Halo 2.x 其实支持挺多的扩展功能，只是文档比较分散，很多人不知道怎么用。今天就把我的经验整理一下，分享给有同样需求的朋友。

默认 Markdown 支持

Halo 2.x 默认使用的是 CommonMark 标准，这个大家应该都比较熟悉了。基本的标题、列表、链接、图片、代码块、表格这些都是支持的，日常写写博客文章完全够用。

不过呢，如果你经常写技术类文章，可能会遇到这些场景：

- 写算法文章需要插入数学公式，比如矩阵、积分符号啥的

- 想在文章里展示代码，并且希望有语法高亮

- 需要画流程图、时序图来解释系统架构

- 想给文章里的文字加上脚注

这些需求默认的 CommonMark 就不够看了，得靠扩展来实现。

数学公式支持

数学公式应该是很多写技术博客的朋友最常用的扩展之一。Halo 2.x 通过 MathJax 或者 KaTeX 来支持数学公式渲染。

如果你用的是 MathJax，需要在主题的模板文件里引入相关的脚本。一般是在 标签里加上：

<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

然后在文章里就可以这样写公式了：

行内公式用 $...$ 包裹，比如 $E = mc^2$，这样会显示成 $E = mc^2$。行间公式用 $$...$$，比如：

$$

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


$$

就会渲染成独立的公式块。

如果你更在意加载速度，KaTeX 也是一个不错的选择，渲染速度比 MathJax 快很多，而且用法基本一致。

代码高亮与更多扩展

代码高亮这个必须重点说说！写技术博客的人，谁不想让自己的代码看起来漂漂亮亮的呢？

Halo 2.x 支持多种代码高亮插件，比较流行的有 Highlight.js 和 Prism.js。我个人比较喜欢 Highlight.js，主题样式选择多，而且支持的语言也比较全。

配置方法很简单，同样是在主题模板里引入 CSS 和 JS 文件：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/github.min.css">

<script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>


<script>hljs.highlightAll();</script>

引入完成之后，你的代码块就会自动高亮了：

public class HelloWorld {

public static void main(String[] args) {


System.out.println("Hello, Halo!");


}


}

除了代码高亮，还有几个比较实用的扩展也介绍一下：

脚注扩展让你可以在文章底部添加注释，写法是这样的： 
这里是一段文字[^1]，后面还有解释。


[^1]: 这是脚注的内容，会显示在文章底部。
任务列表可以让你写出带复选框的列表，特别适合写待办事项或者教程步骤： 
- [x] 第一步已完成

- [ ] 第二步还没做


- [ ] 第三步待完成
表情符号扩展也很好玩，输入 :smile: 就会显示 😄，不过这个见仁见智，有的博主觉得很有趣，有的觉得太花哨了。

流程图和 UML 图

这个功能我觉得是 Halo 2.x 渲染扩展里最酷的部分了！通过 Mermaid.js，你可以在文章里直接画流程图、时序图、类图等等，而且完全用 Markdown 语法，不需要额外的图片编辑工具。

同样需要先引入 Mermaid.js：

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>

<script>mermaid.initialize({ startOnLoad: true });</script>

然后就可以画各种图了。比如流程图：

graph TD

A[开始] --> B{判断条件}


B -->|true| C[执行操作C]


B -->|false| D[执行操作D]


C --> E[结束]


D --> E

时序图也完全没问题：

sequenceDiagram

participant A as 用户


participant B as 前端


participant C as 后端


A->>B: 发送请求


B->>C: 转发请求


C-->>B: 返回数据


B-->>A: 展示结果

类图、甘特图、状态图这些也都能画，简直是技术博主的福音啊！有了这个，画架构图再也不用打开 Visio 或者 Draw.io 了，直接在 Markdown 里就能搞定。

配置建议与常见问题

说了这么多扩展，可能有朋友会问：这么多功能，都加上去会不会影响页面加载速度啊？

这个担心是有道理的。我的建议是：按需引入。不要把所有扩展都加上去，只加你真正会用到的。比如你主要写前端文章，可能代码高亮和流程图是必须的，数学公式可能就用不上；反过来，如果你是写机器学习相关的，数学公式就是刚需。

另外，CDN 的选择也很重要。国内访问的话，建议用国内的 CDN 服务，比如 BootCDN、jsDelivr 国内节点之类的，速度会快很多。

还有一个常见问题是扩展冲突。有些扩展可能会互相影响，比如数学公式的 $ 符号和某些 Markdown 解析器有冲突。解决方法一般是检查一下你的 Markdown 渲染器配置，看看是否需要调整分隔符的规则。

总结

好啦，今天关于 Halo 2.x Markdown 渲染扩展的话题就聊到这里。总的来说，通过引入一些 JavaScript 库，我们可以大幅增强 Halo 的 Markdown 渲染能力，实现数学公式、代码高亮、流程图这些实用的功能。

如果你也是技术博客作者，强烈建议花点时间配置一下这些扩展，真的能大大提升写作体验和读者阅读体验。有什么问题的话，欢迎在评论区留言交流，咱们下期再见！