HTML历理 底部加载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>
    <style>
        .katex { font-size: 1.1em; }
        .formula-block { margin: 1.5rem 0; }
    </style>
</head>
<body>
<h1>数学公式示例</h1>

<div class="formula-block">
    $ a^2 + b^2 = c^2 $
</div>

<div class="formula-block">
    $ f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi $
</div>
<!-- 所有外部资源统一在此处加载 -->
<link rel="stylesheet" href="/_/_js/katex/katex.min.css">

<script>
    // 内联合并的核心功能代码
    !function(){
        // 动态加载 KaTeX 资源
        const loadResource = (url, type) => new Promise((resolve, reject) => {
            const element = type === 'css'
                ? Object.assign(document.createElement('link'), { rel: 'stylesheet', href: url })
                : Object.assign(document.createElement('script'), { src: url });

            element.onload = resolve;
            element.onerror = reject;
            document.head.appendChild(element);
        });

        // 资源加载序列
        Promise.all([
            loadResource('/_/_js/katex/katex.min.js', 'js'),
            loadResource('/_/_js/katex/contrib/auto-render.min.js', 'js')
        ]).then(() => {
            // 初始化渲染
            renderMathInElement(document.body, {
                delimiters: [
                    {left: '$', right: '$', display: false},
                    {left: '$$', right: '$$', display: true}
                ],
                throwOnError: false
            });
        });
    }();
</script>
</body>
</html>

效果图：

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