写文章的时候,公式几乎是绕不开的东西,但在 WordPress 里把公式优雅地放上去,其实挺折腾,截图当图片上传,清晰度要看缩放的脸色,改一个符号就得重截一次,深色模式下是一块突兀的白底,读者也没办法复制源码。
用现成插件的话,不少已经全面转向古腾堡区块编辑器,经典编辑器下体验一般,有的用短代码包裹公式,切到可视化模式就成了看不懂的一串字符,换主题还容易失效。
直接引 CDN,国外 CDN 在国内时快时慢,公式一多的文章,首屏就卡在渲染这一步上。
我的站点用的是 AeroCore 主题 + 经典编辑器,索性就借助ai自己写了个插件,把这三点一个个解决掉,本地引擎、标准 HTML 存储、编辑器原生按钮。
一、编辑器

启用之后,经典编辑器的工具栏会多出一个 $\sqrt{x}$ 按钮。可视化模式和文本模式(Quicktags)用的是同一个弹窗,输入框里写 LaTeX,下方实时预览排版后的效果,右下角两个按钮分别是「插入(行内)」和「插入(独立)」。
同时,选中一段 LaTeX 再点按钮,内容会自动填进输入框,还会顺手剥掉首尾多余的 $ / ( ——从别处直接粘过来的公式也不用手动清理, Ctrl / Cmd + Enter 直接插入,Esc 关闭弹窗,右下角有「清空」可以重来。
双击文章里已有的公式,会把它调回弹窗继续编辑,行内 ⇄ 独立还能互转,不用删了重写。
插入的公式带 contenteditable="false",不会被可视化排版塞进 <br> / <p> 拆散,多行公式尤其稳。
行内公式嵌在文字中间,独立公式居中独占一行——对应 LaTeX 里的 $...$ 与 $$...$$,不用记,点按钮选就行。
二、预览效果
行内公式:质能方程 $E=mc^2$ 就嵌在这句话里,不打断阅读节奏。
独立公式(求根公式): $$ x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} $$
再来几个常见的: $$ e^{i\pi}+1=0 $$ $$ \int_{-\infty}^{\infty}e^{-x^2},dx=\sqrt{\pi} $$
分段函数、矩阵这类结构化写法同样支持: $$ f(x)= \begin{cases} x^2, & x\ge0 \ -x, & x<0 \end{cases} $$
行内也能放下复杂一点的式子:$\sum\limits_{i=1}^{n} i = \frac{n(n+1)}{2}$。
写推导过程时最常用的多行对齐,aligned 环境同样没问题,等号对齐、右侧还能挂中文注释(注释会跟随站点字体,不会突兀地变成等宽英文):
代码块里的公式不会被渲染,比如 \(E=mc^2\) 会原样显示——写 LaTeX 教程时很方便。要是不想让某段内容参与渲染,给它加个 class="aero-math-plain" 即可。
三、使用方法
上传插件并启用,默认的设置基本可以直接用(设置 → 数学公式 里能调细节), 写文章时切到可视化模式,点工具栏 $\sqrt{x}$, 输入 LaTeX,比如 \frac{a}{b},预览区立刻显示成排版后的样子, 选「插入(行内)」或「插入(独立)」,公式就进文章了, 想改公式就双击它,或者把光标放到公式上再点 $\sqrt{x}$。
四、常用 LaTeX 速查
| 想要的效果 | 写法 |
|---|---|
| 分数 | \frac{a}{b} |
| 根号 | \sqrt{x}、\sqrt[3]{x} |
| 上下标 | x^{2}、x_{i} |
| 求和 / 积分 | \sum_{i=1}^{n}、\int_{a}^{b} |
| 极限 | \lim_{x \to 0} |
| 希腊字母 | \alpha \beta \pi \Omega |
| 分段函数 | \begin{cases} x^2, & x \ge 0 \\ -x, & x < 0 \end{cases} |
| 矩阵 | \begin{pmatrix} a & b \\ c & d \end{pmatrix} |
MathJax 内置了 amsmath 宏包,上面这些不需要额外配置,直接写即可。
五、公式转换

如果早先已经在文章里手写了 $...$ 或 $$...$$,不用回去逐篇改,设置里勾选「支持 $ 分隔符」,插件会自动转为整页扫描,这些旧公式立刻就能渲染。
开启后,正文里成对出现的美元符号(比如写价格「$5 和 $10」)会被当成公式,遇到就写成 \$ 转义, 多行公式强烈建议改用按钮插入——手写的多行公式,WordPress 的自动排版会在行与行之间插入 <br> / <p>,把公式结构切碎,用按钮插入的公式是一个完整标签,内部不会被 WordPress 动。
六、读者复制公式
公式渲染成排版好的样子之后,读者想拿走源码就麻烦了。插件给了两种方式,都不需要读者懂 LaTeX, 左键点一下公式 → 自动复制 LaTeX 源码,屏幕上弹出「已复制 LaTeX 源码」提示,移动端照样能用,或者 右键公式 → 弹出中文菜单「复制 LaTeX 源码」也可以复制。
七、公式是怎么存的
插件没有用短代码,而是存成标准 HTML
<!-- 行内 -->
<span class="aero-math aero-math-inline" data-latex="E=mc^2">E=mc^2</span>
<!-- 独立 -->
<div class="aero-math aero-math-block" data-latex="\frac{a}{b}">\frac{a}{b}</div>
这样做的好处很直接,换主题、停用插件都不会留下一堆乱码,data-latex 负责回填编辑,万一被安全过滤剥掉,前台也会退回用标签里的文本渲染,最坏情况不过是公式变回等宽字体的 LaTeX 源码,内容还在,也不会留下短代码之类的残留。
八、性能上优化
公式渲染引擎体积不小,所以插件在「别拖慢站点」这件事上很克制
| 措施 | 说明 |
|---|---|
| 引擎本地化 | MathJax 3.2.2 已内置在插件里,默认从你自己的站点加载,无第三方 CDN 的 DNS / TLS / 跨境开销 |
| 字体按需加载 | 一篇文章通常只请求 2 |
| 按需加载 | 只有含公式的文章加载引擎,其他页面零额外请求 |
| preload 预载 | 含公式的页面会在 <head> 提前发起引擎下载,不用等页脚脚本执行 |
| 精准排版 | 默认不整页扫描,只排版公式节点,长文章几乎无额外开销 |
| 后台懒加载 | 编辑文章时不加载引擎,第一次打开公式弹窗才按需加载 |
| 样式内联 | 后台弹窗样式内联进 <head>,后台零 CSS 请求 |
| 前台可复制latex | 左键直接复制,或者右键复制 |
下载链接: