1.在文章中使用 “定理 / 定义” 环境：

html
<div class="theorem">
  <h4>定理：勾股定理</h4>
  <p>在直角三角形中，设直角边为\(a, b\)，斜边为\(c\)，则有\(a^2 + b^2 = c^2\)。</p>
</div>

<div class="definition">
  <h4>定义：导数</h4>
  <p>函数
  \(f(x)\)
  在
  \(x_0\)
  处的导数定义为：
  $$f'(x_0) = \lim_{\Delta x \to 0} \frac{f(x_0 + \Delta x) - f(x_0)}{\Delta x}$$
  </p>
</div>

预览如下：

2.在博客文章中使用代码块（以 Python 为例）：

python

import numpy as np
# 数值积分示例
def integral_approx(f, a, b, n):
    x = np.linspace(a, b, n)
    return np.trapz(f(x), x)

效果：代码会被高亮，关键字、注释、字符串等区分颜色，提升可读性。

3.字体优化

css
body {
  font-family: "STIX Two Text", "Times New Roman", serif;
  line-height: 1.7; /* 行高，提升文本可读性 */
  color: #333;
}

/* 数学公式专用字体（覆盖默认） */
mjx-math, math {
  font-family: "STIX Two Math", "Latin Modern Math", "Cambria Math", 
               "霞鹜文楷 Mono", "Microsoft YaHei", serif !important;
}

/* 块级数学公式的间距 */
.math-display {
  margin: 1.5em 0;
  text-align: center;
}

/* 代码块样式 */
pre {
  padding: 1rem;           /* 增加内边距，让代码不拥挤 */
  background-color: #f8f9fa; /* 浅灰背景，与正文区分 */
  border-radius: 4px;      /* 轻微圆角，更柔和 */
  box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* 浅阴影，突出层级 */
  overflow-x: auto;        /* 长代码自动横向滚动 */
  margin: 1.5em 0;         /* 上下间距，与段落呼吸感一致 */
}
code {
  /* 优先用霞鹜文楷，再 fallback 到系统等宽字体 */
  font-family: "霞鹜文楷 Mono", "Consolas", "Menlo", "Microsoft YaHei Mono", monospace;
  font-size: 0.95em; /* 可选：微调字号，平衡可读性与紧凑性 */
}

/* 「定理/定义」等专业环境的样式（可选，提升学术感） */
.definition {
  border-left: 3px solid #2196F3;
  padding: 0.5em 1em;
  background-color: #f0f7ff;
  margin: 1em 0;
}
.definition h4 {
  margin-top: 0;
  color: #2196F3;
}
.theorem {
  border-left: 3px solid #FF9800;
  padding: 0.5em 1em;
  background-color: #fff8e1;
  margin: 1em 0;
}
.theorem h4 {
  margin-top: 0;
  color: #FF9800;
}

html
<!-- 手动添加 class="math-display" 调用样式 -->
<div class="math-display">
  $$\int_{0}^{\infty} e^{-x} dx = 1$$
</div>