NW' Blog
2026年8月15日 · 内容页面

公式渲染示例(KaTeX)

博客已全局接入 KaTeX 公式渲染引擎:正文与评论区均可使用 $...$(行内公式)与 $$...$$(块级公式)书写 LaTeX 数学公式,无需任何额外配置。


一、行内公式

行内公式使用单个美元符包裹:爱因斯坦质能方程 $E = mc^2$ 描述了质量与能量的等价关系;勾股定理 $a^2 + b^2 = c^2$ 是平面几何的基础;欧拉恒等式 $e{i\pi} + 1 = 0$ 被誉为数学中最美的公式;牛顿第二定律 $F = ma$ 则是经典力学的核心。

行内公式可以嵌套上下标与根式:$e{i\theta} = \cos\theta + i\sin\theta$,$\sqrt{a^2 + b^2}$,$x_{1,2} = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$。

markdown
行内公式:$...$(左右各一个美元符,不跨行)

$E = mc^2$
$a^2 + b^2 = c^2$
$e{i\pi} + 1 = 0$
$F = ma$
$e{i\theta} = \cos\theta + i\sin\theta$
$\sqrt{a^2 + b^2}$
$x_{1,2} = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$

二、块级公式(Clapp 频率公式)

频率公式(Clapp)

$$f = \frac{1}{2\pi\sqrt{L_1 \cdot \left( C_{eq} + C_{V1} + C_{par} \right)}}, \qquad \frac{1}{C_{eq}} = \frac{1}{C_1} + \frac{1}{C_2} + \frac{1}{C_3}$$

代入参数:

$$\frac{1}{C_{eq}} = \frac{1}{120} + \frac{1}{120} + \frac{1}{18} = 0.0722\ \mathrm{pF^{-1}} \Rightarrow C_{eq} = 13.85\ \mathrm{pF}$$

代入 L₁ 后即可求得振荡频率:

$$f = \frac{1}{2\pi\sqrt{22 \times 10^{-9} \cdot \left( 13.85 + C_{V1} + C_{par} \right) \times 10^{-12}}} \approx 270.8\ \mathrm{MHz}$$

markdown
块级公式:$$...$$(左右各两个美元符,可跨行)

$$f = \frac{1}{2\pi\sqrt{L_1 \cdot \left( C_{eq} + C_{V1} + C_{par} \right)}}, \qquad \frac{1}{C_{eq}} = \frac{1}{C_1} + \frac{1}{C_2} + \frac{1}{C_3}$$

$$\frac{1}{C_{eq}} = \frac{1}{120} + \frac{1}{120} + \frac{1}{18} = 0.0722\ \mathrm{pF^{-1}} \Rightarrow C_{eq} = 13.85\ \mathrm{pF}$$

$$f = \frac{1}{2\pi\sqrt{22 \times 10^{-9} \cdot \left( 13.85 + C_{V1} + C_{par} \right) \times 10^{-12}}} \approx 270.8\ \mathrm{MHz}$$

三、多行公式

使用 aligned 环境对齐多行公式(对齐符 & 在页面源码中写作 &):

$$\begin{aligned} x + y &= 10 \\ 2x - y &= 4 \end{aligned}$$

使用 cases 环境书写分段函数:

$$f(x) = \begin{cases} x^2, & x \geq 0 \\ -x, & x < 0 \end{cases}$$

推导过程换行对齐:

$$\begin{aligned} S_n &= \sum_{k=1}^{n} k \\ &= \frac{n(n+1)}{2} \end{aligned}$$

markdown
aligned 环境(& 为对齐符,换行用 \\):

$$\begin{aligned} x + y &= 10 \\ 2x - y &= 4 \end{aligned}$$

cases 环境(分段函数):

$$f(x) = \begin{cases} x^2, & x \geq 0 \\ -x, & x < 0 \end{cases}$$

推导换行对齐:

$$\begin{aligned} S_n &= \sum_{k=1}^{n} k \\ &= \frac{n(n+1)}{2} \end{aligned}$$

四、矩阵

矩阵使用 pmatrix / bmatrix 环境:

$$\begin{pmatrix} a_{11} & a_{12} \\ a_{21} & a_{22} \end{pmatrix} \cdot \begin{pmatrix} x_1 \\ x_2 \end{pmatrix} = \begin{pmatrix} b_1 \\ b_2 \end{pmatrix}$$

行列式:

$$\det(A) = \begin{vmatrix} a & b \\ c & d \end{vmatrix} = ad - bc$$

markdown
矩阵环境:pmatrix / bmatrix / vmatrix(& 分隔列,\\ 换行)

$$\begin{pmatrix} a_{11} & a_{12} \\ a_{21} & a_{22} \end{pmatrix} \cdot \begin{pmatrix} x_1 \\ x_2 \end{pmatrix} = \begin{pmatrix} b_1 \\ b_2 \end{pmatrix}$$

$$\det(A) = \begin{vmatrix} a & b \\ c & d \end{vmatrix} = ad - bc$$

五、微积分

求和(巴塞尔问题):

$$\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}$$

积分(高斯积分):

$$\int_0^\infty e^{-x^2} \, dx = \frac{\sqrt{\pi}}{2}$$

极限:

$$\lim_{x \to 0} \frac{\sin x}{x} = 1, \qquad \lim_{x \to \infty} \left( 1 + \frac{1}{x} \right)^x = e$$

微分:

$$\frac{d}{dx} \left( e^{kx} \right) = k e^{kx}, \qquad \frac{\partial^2 u}{\partial x^2} = \frac{1}{c^2} \frac{\partial^2 u}{\partial t^2}$$

markdown
求和(巴塞尔问题):

$$\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}$$

积分(高斯积分):

$$\int_0^\infty e^{-x^2} \, dx = \frac{\sqrt{\pi}}{2}$$

极限:

$$\lim_{x \to 0} \frac{\sin x}{x} = 1, \qquad \lim_{x \to \infty} \left( 1 + \frac{1}{x} \right)^x = e$$

微分:

$$\frac{d}{dx} \left( e^{kx} \right) = k e^{kx}, \qquad \frac{\partial^2 u}{\partial x^2} = \frac{1}{c^2} \frac{\partial^2 u}{\partial t^2}$$

六、符号与希腊字母

常用希腊字母:

$$\alpha \quad \beta \quad \gamma \quad \delta \quad \varepsilon \quad \theta \quad \lambda \quad \mu \quad \pi \quad \rho \quad \sigma \quad \phi \quad \omega \quad \Omega$$

关系符号:$\leq$ $\geq$ $\approx$ $\neq$ $\equiv$ $\propto$ $\in$ $\notin$ $\subset$ $\cup$ $\cap$ $\forall$ $\exists$ $\infty$ $\pm$ $\times$ $\cdot$ $\rightarrow$

组合与矢量:$\binom{n}{k}$,$\vec{F} = m\vec{a}$,$\hat{x}$,$\bar{x}$,$\dot{q}$,$\nabla \times \vec{B} = \mu_0 \vec{J}$

markdown
希腊字母(块级):

$$\alpha \quad \beta \quad \gamma \quad \delta \quad \varepsilon \quad \theta \quad \lambda \quad \mu \quad \pi \quad \rho \quad \sigma \quad \phi \quad \omega \quad \Omega$$

关系符号(行内):

$\leq$ $\geq$ $\approx$ $\neq$ $\equiv$ $\propto$ $\in$ $\notin$ $\subset$ $\cup$ $\cap$ $\forall$ $\exists$ $\infty$ $\pm$ $\times$ $\cdot$ $\rightarrow$

组合与矢量(行内):

$\binom{n}{k}$,$\vec{F} = m\vec{a}$,$\hat{x}$,$\bar{x}$,$\dot{q}$,$\nabla \times \vec{B} = \mu_0 \vec{J}$

七、代码块中的公式不渲染

为防止误渲染,代码块(pre/code)内的 $$...$$ 保持原文显示,仅用于展示语法源码:

markdown
频率公式 (Clapp):

$$f = \frac{1}{2\pi\sqrt{L_1 \cdot \left( C_{eq} + C_{V1} + C_{par} \right)}}$$

代入参数:

$$\frac{1}{C_{eq}} = \frac{1}{120} + \frac{1}{120} + \frac{1}{18} = 0.0722\ \mathrm{pF^{-1}} \Rightarrow C_{eq} = 13.85\ \mathrm{pF}$$

八、评论区公式支持

评论区同样支持公式渲染:发评论时直接写 $E = mc^2$$$...$$ 即可,发布后与预览都会渲染。试试在下方评论区发一条含公式的评论,例如:

$$R_{th} = \frac{T_j - T_a}{P} \qquad \text{(热阻公式示例)}$$

markdown
评论区语法与正文完全一致(发布后自动渲染):

$$R_{th} = \frac{T_j - T_a}{P} \qquad \text{(热阻公式示例)}$$

行内公式:$E = mc^2$

\[\int_a^b f(x)\,dx\](也支持 \[\] 块级写法)

九、维护提示(手写 .astro 时)

.astro 页面源码中手写公式时,必须注意以下转义规则。若使用 工具编辑器/tool-editor-article/)导入/导出,所有转义已自动处理,无需手动修改:

  1. 花括号 { } 必须写成 &#123; / &#125;:Astro 编译器会把 { 当作表达式起始,未转义直接构建报错 Syntax error;浏览器解析 DOM 后自动还原为 {,KaTeX 正常扫描渲染。
  2. 对齐符 & 必须写成 &amp;:aligned / cases / 矩阵环境中的 & 在 HTML 中是实体起始符,裸写会破坏标签解析。
  3. < 必须写成 &lt;:如 x < 0,否则会被当作标签起始,触发 Astro 解析错误。
  4. 推荐工作流:在工具编辑器粘贴 LaTeX 实时预览 → 导出 .astro(自动转义)→ 部署。手写页面时参考本页代码注释。
markdown
✗ 错误:直接粘贴 LaTeX,{ } 未转义 → 构建报错 Syntax error

$$f = \frac{1}{2\pi\sqrt{L_1 \cdot \left( C_{eq} + C_{V1} + C_{par} \right)}}$$

✓ 正确:花括号实体转义(浏览器解析后自动还原,KaTeX 正常渲染)

$$f = \frac&#123;1&#125;&#123;2\pi\sqrt&#123;L_1 \cdot \left( C_&#123;eq&#125; + C_&#123;V1&#125; + C_&#123;par&#125; \right)&#125;&#125;$$

✓ 对齐符 & 写成 &amp;,小于号 < 写成 &lt;:

$$\begin&#123;cases&#125; x^2, &amp; x \geq 0 \\ -x, &amp; x &lt; 0 \end&#123;cases&#125;$$
评论区 留下您的想法
教程