Hexo博客公式渲染指南 - HTML样式法
在Hexo博客中使用HTML样式法渲染数学公式，无需额外配置，兼容性好，是最简单可靠的方式。
一、为什么选择HTML样式法
| 优点 | 说明 |
|---|---|
| 无需配置 | 不需要安装插件或修改主题模板 |
| 兼容性好 | 所有浏览器都支持 |
| 样式可控 | 可自定义颜色、字体、间距等 |
| 性能优秀 | 无需加载额外脚本 |
二、核心模板
2.1 基础分数模板
<span style="display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; font-size: 1.2em; margin: 0 0.2em;">
<span style="border-bottom: 1.5px solid #1e293b; padding: 0 0.2em 0.05em; line-height: 1.2; font-weight: 600;">分子</span>
<span style="padding: 0.05em 0.2em 0; line-height: 1.2; font-weight: 600;">分母</span>
</span>
2.2 带背景的公式块模板
<span style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 1.5rem; padding: 1.4rem 1.8rem; margin: 1.2rem 0; font-family: 'JetBrains Mono', 'Fira Code', monospace; letter-spacing: 0.3px; display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; font-size: 1.1rem;">
<strong style="font-family: 'Segoe UI', system-ui, sans-serif;">📐 公式名称</strong>
<span>=</span>
<!-- 公式内容 -->
</span>
2.3 高亮变量模板
<span style="background: #dbeafe; color: #1e40af; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 0.4rem;">变量名</span>
三、常用公式示例
3.1 比值变化量（比重差/平均数增长量）
<span style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 1.5rem; padding: 1.4rem 1.8rem; margin: 1.2rem 0; font-family: 'JetBrains Mono', 'Fira Code', monospace; letter-spacing: 0.3px; display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; font-size: 1.1rem;">
<strong style="font-family: 'Segoe UI', system-ui, sans-serif;">📐 比值变化量</strong>
<span>=</span>
<span style="display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; font-size: 1.2em; margin: 0 0.2em;">
<span style="border-bottom: 1.5px solid #1e293b; padding: 0 0.2em 0.05em; line-height: 1.2; font-weight: 600;">A</span>
<span style="padding: 0.05em 0.2em 0; line-height: 1.2; font-weight: 600;">B</span>
</span>
<span>×</span>
<span style="display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; font-size: 1.2em; margin: 0 0.2em;">
<span style="border-bottom: 1.5px solid #1e293b; padding: 0 0.2em 0.05em; line-height: 1.2; font-weight: 600;">a − b</span>
<span style="padding: 0.05em 0.2em 0; line-height: 1.2; font-weight: 600;">1 + a</span>
</span>
</span>
渲染效果：
📐 比值变化量 = A B × a − b 1 + a3.2 比值增长率
<span style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 1.5rem; padding: 1.4rem 1.8rem; margin: 1.2rem 0; font-family: 'JetBrains Mono', 'Fira Code', monospace; letter-spacing: 0.3px; display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; font-size: 1.1rem;">
<strong style="font-family: 'Segoe UI', system-ui, sans-serif;">📐 比值增长率</strong>
<span>=</span>
<span style="display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; font-size: 1.2em; margin: 0 0.2em;">
<span style="border-bottom: 1.5px solid #1e293b; padding: 0 0.2em 0.05em; line-height: 1.2; font-weight: 600;">a − b</span>
<span style="padding: 0.05em 0.2em 0; line-height: 1.2; font-weight: 600;">1 + b</span>
</span>
</span>
渲染效果：
📐 比值增长率 = a − b 1 + b四、常用符号对照表
| 符号 | HTML代码 | 说明 |
|---|---|---|
| × | × |
乘号 |
| ÷ | ÷ |
除号 |
| − | − |
减号（长） |
| = | = |
等于号 |
| > | > |
大于号 |
| < | < |
小于号 |
| % | % |
百分号 |
| Δ | Δ |
增量符号 |
| → | → |
箭头 |
| ⇨ | ⇨ |
粗箭头 |
五、完整使用示例
---
title: 资料分析公式笔记
date: 2026-06-02
---
## 核心公式
设现期比值 <span style="background: #dbeafe; color: #1e40af; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 0.4rem;">A/B</span>，分子增速为 <span style="background: #dbeafe; color: #1e40af; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 0.4rem;">a</span>，分母增速为 <span style="background: #dbeafe; color: #1e40af; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 0.4rem;">b</span>。
### 1. 比重差/平均数增长量
<span style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 1.5rem; padding: 1.4rem 1.8rem; margin: 1.2rem 0; font-family: 'JetBrains Mono', 'Fira Code', monospace; letter-spacing: 0.3px; display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; font-size: 1.1rem;">
<span>=</span>
<span style="display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; font-size: 1.2em; margin: 0 0.2em;">
<span style="border-bottom: 1.5px solid #1e293b; padding: 0 0.2em 0.05em; line-height: 1.2; font-weight: 600;">A</span>
<span style="padding: 0.05em 0.2em 0; line-height: 1.2; font-weight: 600;">B</span>
</span>
<span>×</span>
<span style="display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; font-size: 1.2em; margin: 0 0.2em;">
<span style="border-bottom: 1.5px solid #1e293b; padding: 0 0.2em 0.05em; line-height: 1.2; font-weight: 600;">a − b</span>
<span style="padding: 0.05em 0.2em 0; line-height: 1.2; font-weight: 600;">1 + a</span>
</span>
</span>
### 2. 平均数增长率
<span style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 1.5rem; padding: 1.4rem 1.8rem; margin: 1.2rem 0; font-family: 'JetBrains Mono', 'Fira Code', monospace; letter-spacing: 0.3px; display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; font-size: 1.1rem;">
<span>=</span>
<span style="display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; font-size: 1.2em; margin: 0 0.2em;">
<span style="border-bottom: 1.5px solid #1e293b; padding: 0 0.2em 0.05em; line-height: 1.2; font-weight: 600;">a − b</span>
<span style="padding: 0.05em 0.2em 0; line-height: 1.2; font-weight: 600;">1 + b</span>
</span>
</span>
## 变量说明
- <span style="background: #dbeafe; color: #1e40af; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 0.4rem;">A</span>：现期部分量/分子
- <span style="background: #dbeafe; color: #1e40af; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 0.4rem;">B</span>：现期整体量/分母
- <span style="background: #dbeafe; color: #1e40af; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 0.4rem;">a</span>：部分/分子增长率
- <span style="background: #dbeafe; color: #1e40af; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 0.4rem;">b</span>：整体/分母增长率
六、快捷输入技巧
6.1 分数模板（复制即用）
<span style="display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; font-size: 1.2em; margin: 0 0.2em;">
<span style="border-bottom: 1.5px solid #1e293b; padding: 0 0.2em 0.05em; line-height: 1.2; font-weight: 600;">NUM</span>
<span style="padding: 0.05em 0.2em 0; line-height: 1.2; font-weight: 600;">DEN</span>
</span>
6.2 公式块模板（复制即用）
<span style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 1.5rem; padding: 1.4rem 1.8rem; margin: 1.2rem 0; font-family: 'JetBrains Mono', 'Fira Code', monospace; letter-spacing: 0.3px; display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; font-size: 1.1rem;">
<strong style="font-family: 'Segoe UI', system-ui, sans-serif;">📐 公式名称</strong>
<span>=</span>
<!-- 在此插入分数 -->
</span>
七、注意事项
- 保持HTML块独立：在HTML块前后添加空行，避免Markdown解析中断
- 使用正确的符号：使用
−（长减号）而非-（连字符），×而非x - 样式一致性：保持颜色、字体大小、间距的统一
- 响应式考虑：使用
flex-wrap: wrap确保在移动端正常显示
遵循以上指南，你可以在Hexo博客中使用纯HTML样式法正确渲染各种数学公式！
