PHP历理 KaTeX 数学公式渲染 

<!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>

    <!-- 1. 加载 KaTeX 核心样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">

    <!-- 2. 自定义样式 -->
    <style>
        /* 公式基础样式 */
        .katex {
            font-size: 1.1em;
            color: #2d3748;  /* 深灰色 */
        }
        /* 块级公式容器 */
        .formula-block {
            margin: 1.5rem 0;
            padding: 1rem;
            background: #f7fafc;  /* 浅蓝灰色背景 */
            border-radius: 4px;
        }
        /* 移动端适配 */
        @media (max-width: 640px) {
            .katex { font-size: 1em; }
        }
    </style>
</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 class="formula-block">
    $\ce{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>

<!-- 3. 按顺序加载脚本 -->
<!-- KaTeX 核心库 -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
<!-- 自动渲染扩展 -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
<!-- 化学方程式扩展 -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/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>
</body>
</html>

效果图：

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