测试一些渲染

这篇既是渲染测试，也是写作用的速查表。每块先写怎么用，再放实际效果。

一、行内数学公式

怎么写：正文里用一对美元符号把表达式包起来。Hugo 在构建时用内置 KaTeX 把它转成 MathML，浏览器原生排版——不加载 MathJax、不请求字体、不跑 JS，所以手机上也不会有公式闪烁。

质能方程 $E=mc^2$ ，欧拉恒等式 $e^{i\pi}+1=0$ ，高斯积分 $\int_{-\infty}^{\infty} e^{-x^2}dx=\sqrt{\pi}$ ，二项式系数 $\binom{n}{k}=\frac{n!}{k!(n-k)!}$ 。行内公式会和正文基线对齐，不会把行高撑开。

也可以写带下标的物理量： $v_0$ 、 $\Delta t$ 、 $\hbar$ 、 $\nabla \times \vec{E}$ 。

二、块级数学公式

怎么写：用两对美元符号单独成段，公式会独占一行、居中、可横向滚动。适合推导、矩阵、分段函数。

积分：

\int_{-\infty}^{+\infty} e^{-x^2}\,\mathrm{d}x = \sqrt{\pi}

求和与极限：

\sum_{n=1}^{\infty}\frac{1}{n^2}=\frac{\pi^2}{6}, \qquad \lim_{x\to 0}\frac{\sin x}{x}=1

矩阵与行列式：

A=\begin{pmatrix} a & b \\ c & d \end{pmatrix}, \qquad \det A = ad-bc, \qquad A^{-1}=\frac{1}{ad-bc}\begin{pmatrix} d & -b \\ -c & a \end{pmatrix}

分段函数：

f(x)= \begin{cases} x^2, & x \ge 0,\\[4pt] -x, & x < 0. \end{cases}

傅里叶变换（测试长公式的横向滚动）：

\hat{f}(\xi)=\int_{-\infty}^{\infty} f(x)\,e^{-2\pi i x \xi}\,\mathrm{d}x, \qquad f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi)\,e^{2\pi i x \xi}\,\mathrm{d}\xi

三、化学方程式

怎么写：Hugo 内置的 KaTeX 不含 mhchem 扩展，所以 \ce{} 不可用。改用 \mathrm{} 写元素符号，_2 写下标，^{+} / ^{-} 写电荷，箭头用 \rightarrow、\rightleftharpoons（可逆），气体和沉淀用 \uparrow / \downarrow。

需要在箭头上标反应条件时，写成 \mathop{\longrightarrow}\limits^{\text{点燃}}——条件会叠在箭头正上方。不要用 \xrightarrow：Hugo 转 MathML 后它会把条件挤到箭头上，实测会重叠。

氢气燃烧：

\mathrm{2H_2 + O_2 \mathop{\longrightarrow}\limits^{\text{点燃}} 2H_2O}

碳酸钙高温分解（可逆反应）：

\mathrm{CaCO_3 \rightleftharpoons CaO + CO_2 \uparrow}

离子方程式——硝酸银与氯化钠：

\mathrm{Ag^+ + Cl^- \rightarrow AgCl \downarrow}

乙醇完全燃烧：

\mathrm{C_2H_5OH + 3O_2 \mathop{\longrightarrow}\limits^{\text{点燃}} 2CO_2 + 3H_2O}

弱碱的电离平衡：

\mathrm{NH_3 + H_2O \rightleftharpoons NH_4^+ + OH^-}

配平后的高锰酸钾氧化反应（酸性条件）：

\mathrm{2MnO_4^- + 5H_2C_2O_4 + 6H^+ \rightarrow 2Mn^{2+} + 10CO_2 \uparrow + 8H_2O}

四、函数图像

怎么写：用 plot shortcode，参数都是可选的，只有 expr 必填。

{{< plot expr="sin(x)" xmin="-6.28" xmax="6.28" ymin="-1.6" ymax="1.6" caption="y = sin x" >}}

expr：函数表达式，x 是自变量，乘方用 ^
xmin / xmax：横轴范围，默认 -6 到 6
ymin / ymax：纵轴范围，不写就自动取值域（已去掉极端值，避免渐近线把图压扁）
caption：图注，可省

支持的函数：sin cos tan asin acos atan sqrt abs log ln exp floor ceil round min max pow；常量 pi、e。图像由一段 4.6 KB 的脚本在浏览器里现算成 SVG，不联网、不依赖任何图表库；渐近线处会自动断开，不会连出一条竖线。

正弦：

y = sin x

抛物线：

y = x²/4 − 2

高斯函数（自动值域）：

y = e^(−x²)

正切（渐近线处断开）：

y = tan x

阻尼振荡：

y = e^(−0.3x)·sin(4x)

五、代码块

怎么写：三个反引号包住，第一行后面写语言名（js、python、bash、css…）。语法高亮由 Hugo 构建时生成，不需要前端高亮库；鼠标移到代码块上，右上角会出现 COPY 按钮。行内代码用单个反引号，比如 npm run build。

代码块里的 $ 和花括号都不会被当成公式或 shortcode 处理，可以放心写。

JavaScript：

// 防抖：滚动、输入这类高频事件的标准写法
function debounce(fn, wait = 200) {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), wait);
  };
}

const onScroll = debounce(() => {
  console.log('scrollY =', window.scrollY);
}, 120);

window.addEventListener('scroll', onScroll, { passive: true });

Python：

from dataclasses import dataclass
from math import isclose


@dataclass(frozen=True)
class Point:
    x: float
    y: float

    def dist(self, other: "Point") -> float:
        return ((self.x - other.x) ** 2 + (self.y - other.y) ** 2) ** 0.5


a, b = Point(0, 0), Point(3, 4)
assert isclose(a.dist(b), 5.0)
print(f"{a.dist(b)=}")

Bash：

#!/usr/bin/env bash
set -euo pipefail

cd /var/www/blog
hugo --minify --cleanDestinationDir
echo "构建完成：$(find public -name '*.html' | wc -l) 个页面"

带超长行的代码（测试横向滚动，不撑破页面）：

transform = {"name": "demo", "steps": [{"op": "normalize", "params": {"mean": [0.485, 0.456, 0.406], "std": [0.229, 0.224, 0.225], "channel_order": "RGB", "resize": {"height": 384, "width": 384, "interpolation": "bicubic"}}}]}

CSS（顺便验证浅色 / 深色下的代码配色）：

.card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 1.3rem;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}

.card:hover {
  transform: translateY(-5px);
}

小结

模块	技术方案	前端开销
数学公式	构建时 KaTeX → MathML	0 JS
化学方程式	同上，用 `\mathrm` + 箭头	0 JS
函数图像	短代码 + 自写 SVG 绘图	4.6 KB，仅含图的页面加载
代码块	Hugo 构建时高亮	0 JS（复制按钮复用主题脚本）

全部零外部请求，断网也能正常显示。