HTML历理 数学公式渲染 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KaTeX 数学公式渲染示例</title>
</head>
<body>
<h1>数学公式渲染演示</h1>

<!-- 行内公式示例 -->
<p>勾股定理: $a^2 + b^2 = c^2$</p>

<!-- 块级积分公式 -->
<div class="formula-block">
    $$ f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi $$
</div>

<!-- 化学方程式 -->
<div>
  ${CO2 + C -> 2CO}$
</div>

<!-- 麦克斯韦方程组 -->
<div class="formula-block">
    $$ \begin{aligned}
    \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
    \nabla \cdot \mathbf{B} &= 0
    \end{aligned} $$
</div>

</body>
</html>
<!-- 1. 加载 KaTeX 核心样式 -->
<link rel="stylesheet" href="/_/_js/katex/katex.min.css">
<!-- 3. 按顺序加载脚本 -->
<!-- KaTeX 核心库 -->
<script defer src="/_/_js/katex/katex.min.js"></script>
<!-- 自动渲染扩展 -->
<script defer src="/_/_js/katex/contrib/auto-render.min.js"></script>
<!-- 化学方程式扩展 -->
<script defer src="/_/_js/katex/contrib/mhchem.min.js"></script>

<!-- 4. 初始化配置 -->
<script>
    document.addEventListener("DOMContentLoaded", function() {
        // 配置渲染参数
        renderMathInElement(document.body, {
            // 分隔符配置
            delimiters: [
                {left: '$$', right: '$$', display: true},  // 块级公式
                {left: '$', right: '$', display: false}      // 行内公式
            ],
            // 扩展配置
            macros: {
                "\\ce": "\\text{mhchem}",  // 启用化学公式支持
                "\\RR": "\\mathbb{R}"       // 自定义宏：实数集符号
            },
            // 错误处理
            throwOnError: false,            // 不抛出错误
            errorColor: "#e53e3e",          // 错误提示颜色（红色）
            // 性能优化
            strict: false                   // 宽松模式
        });
    });
</script>

效果图：

posted @ 2025-05-09 18:50  onestopweb  阅读(100)  评论(0)    收藏  举报