WORDPRESS中不使用插件加载KATEX来进行数学LATEX公式渲染
|
|
40
|
使用感受,技术,提示,网站/前端/后端/

917 字
|
20 分钟
加载Katex数学渲染引擎中…
30%
恭喜！KATEX数学渲染引擎已加载完成

前言

在网页中嵌入数学公式一直比较麻烦，常见的嵌入数学公式的方法是使用Latex格式在网页中进行公式编写，然后调用脚本如Katex.js这种轻量的公式渲染脚本来进行数学公式的页面渲染。

WordPress有很多种的方法让Katex进行加载，比如安装插件之类的，但是呀，安装插件之后，每一个页面加载的时候都会加载Katex脚本，即使该网页没有数学公式需要渲染。而Katex.js也是有一定大小的。本着能省下些宽带就剩下些宽带以及尽量提高网站加载速度以及提升首屏加载速度的想法，我们这需要使用一种方法，只让有需要被渲染的公式的网页才会加载Katex.js来进行渲染。

思路

WordPress本身提供了在文章中嵌入html的方法，我的想法就是在文章中添加一个自定义的html页面，然后通过自定义的html界面，加载Katex脚本来进行渲染，这样子只需要在需要渲染公式的网站上手动加上加载代码就可以了，别的界面不会加载Katex脚本，也提高了网站的加载速度

实现步骤

首先就是嵌入html了，我这有一个动画，来显示加载进度（为了美观，动画加载速度被刻意放缓了）

<!-- KaTeX加载进度条和样式 -->
<style>
    #katex-loading-container {
        width: 100%;
        background-color: #f1f1f1;
        border-radius: 5px;
        margin: 8px 0;
        padding: 2px;
    }
    #katex-loading-bar {
        width: 30%;
        height: 18px;
        background-color: #4CAF50;
        text-align: center;
        line-height: 18px;
        color: white;
        border-radius: 3px;
        transition: width 0.1s linear; /* 极快的过渡速度 */
    }
    .katex-loading-message {
        text-align: center;
        font-style: italic;
        color: #555;
        margin: 5px 0;
    }
    .katex-success-message {
        text-align: center;
        font-weight: bold;
        color: #4CAF50;
        margin: 10px 0;
        padding: 5px;
        border: 1px solid #4CAF50;
        border-radius: 4px;
        background-color: #f8fff8;
    }
    .katex-hidden {
        display: none;
    }
</style>

<div id="katex-loader">
    <div class="katex-loading-message">加载Katex数学渲染引擎中...</div>
    <div id="katex-loading-container">
        <div id="katex-loading-bar">30%</div>
    </div>
</div>

<div id="katex-success" class="katex-success-message katex-hidden">
    恭喜！KATEX数学渲染引擎已加载完成
</div>

<!-- 引入KaTeX CSS和JS，预加载以加快进度 -->
<script>
    // 立即开始加载进度
    updateProgress(30);
    
    // 控制加载进度条的函数
    function updateProgress(percentage) {
        var progressBar = document.getElementById('katex-loading-bar');
        if (progressBar) {
            progressBar.style.width = percentage + '%';
            progressBar.innerText = percentage + '%';
            
            if (percentage >= 100) {
                setTimeout(function() {
                    document.getElementById('katex-loader').classList.add('katex-hidden');
                    document.getElementById('katex-success').classList.remove('katex-hidden');
                    if (window.renderMathInElement) {
                        renderMath();
                    }
                }, 1000); 
            }
        }
    }
    
    function renderMath() {
        renderMathInElement(document.body, {
            delimiters: [
                {left: "$$", right: "$$", display: true},
                {left: "$", right: "$", display: false},
                {left: "\\(", right: "\\)", display: false},
                {left: "\\[", right: "\\]", display: true}
            ],
            throwOnError: false
        });
    }
    
    setTimeout(function() {
        if (!document.getElementById('katex-loader').classList.contains('katex-hidden')) {
            updateProgress(100);
        }
    }, 1500);
</script>

<!-- 同步方式加载CSS，加快显示速度 -->
<link rel="stylesheet" href="https://www.q2019.com/q2019_script/npm/katex/katex.min.css">
<script>updateProgress(60);</script>

<!-- 加载JS文件 -->
<script>
    // 使用JavaScript动态加载脚本，有更好的进度控制
    var script1 = document.createElement('script');
    script1.src = 'https://www.q2019.com/q2019_script/npm/katex/katex.min.js';
    script1.onload = function() { 
        updateProgress(85);
        var script2 = document.createElement('script');
        script2.src = 'https://www.q2019.com/q2019_script/npm/katex/contrib/auto-render.min.js';
        script2.onload = function() { 
            updateProgress(100); 
        };
        document.body.appendChild(script2);
    };
    document.body.appendChild(script1);
</script><!-- KaTeX加载进度条和样式 -->
<style>
    #katex-loading-container {
        width: 100%;
        background-color: #f1f1f1;
        border-radius: 5px;
        margin: 8px 0;
        padding: 2px;
    }
    #katex-loading-bar {
        width: 30%;
        height: 18px;
        background-color: #4CAF50;
        text-align: center;
        line-height: 18px;
        color: white;
        border-radius: 3px;
        transition: width 0.1s linear; /* 极快的过渡速度 */
    }
    .katex-loading-message {
        text-align: center;
        font-style: italic;
        color: #555;
        margin: 5px 0;
    }
    .katex-success-message {
        text-align: center;
        font-weight: bold;
        color: #4CAF50;
        margin: 10px 0;
        padding: 5px;
        border: 1px solid #4CAF50;
        border-radius: 4px;
        background-color: #f8fff8;
    }
    .katex-hidden {
        display: none;
    }
</style>

<div id="katex-loader">
    <div class="katex-loading-message">加载Katex数学渲染引擎中...</div>
    <div id="katex-loading-container">
        <div id="katex-loading-bar">30%</div>
    </div>
</div>

<div id="katex-success" class="katex-success-message katex-hidden">
    恭喜！KATEX数学渲染引擎已加载完成
</div>

<!-- 引入KaTeX CSS和JS，预加载以加快进度 -->
<script>
    // 立即开始加载进度
    updateProgress(30);
    
    // 控制加载进度条的函数
    function updateProgress(percentage) {
        var progressBar = document.getElementById('katex-loading-bar');
        if (progressBar) {
            progressBar.style.width = percentage + '%';
            progressBar.innerText = percentage + '%';
            
            if (percentage >= 100) {
                setTimeout(function() {
                    document.getElementById('katex-loader').classList.add('katex-hidden');
                    document.getElementById('katex-success').classList.remove('katex-hidden');
                    if (window.renderMathInElement) {
                        renderMath();
                    }
                }, 1000); 
            }
        }
    }
    
    function renderMath() {
        renderMathInElement(document.body, {
            delimiters: [
                {left: "$$", right: "$$", display: true},
                {left: "$", right: "$", display: false},
                {left: "\\(", right: "\\)", display: false},
                {left: "\\[", right: "\\]", display: true}
            ],
            throwOnError: false
        });
    }
    
    setTimeout(function() {
        if (!document.getElementById('katex-loader').classList.contains('katex-hidden')) {
            updateProgress(100);
        }
    }, 1500);
</script>

<!-- 同步方式加载CSS，加快显示速度 -->
<link rel="stylesheet" href="https://www.q2019.com/q2019_script/npm/katex/katex.min.css">
<script>updateProgress(60);</script>

<!-- 加载JS文件 -->
<script>
    // 使用JavaScript动态加载脚本，有更好的进度控制
    var script1 = document.createElement('script');
    script1.src = 'https://www.q2019.com/q2019_script/npm/katex/katex.min.js';
    script1.onload = function() { 
        updateProgress(85);
        var script2 = document.createElement('script');
        script2.src = 'https://www.q2019.com/q2019_script/npm/katex/contrib/auto-render.min.js';
        script2.onload = function() { 
            updateProgress(100); 
        };
        document.body.appendChild(script2);
    };
    document.body.appendChild(script1);
</script><!-- KaTeX加载进度条和样式 -->
<style>
    #katex-loading-container {
        width: 100%;
        background-color: #f1f1f1;
        border-radius: 5px;
        margin: 8px 0;
        padding: 2px;
    }
    #katex-loading-bar {
        width: 30%;
        height: 18px;
        background-color: #4CAF50;
        text-align: center;
        line-height: 18px;
        color: white;
        border-radius: 3px;
        transition: width 0.1s linear; /* 极快的过渡速度 */
    }
    .katex-loading-message {
        text-align: center;
        font-style: italic;
        color: #555;
        margin: 5px 0;
    }
    .katex-success-message {
        text-align: center;
        font-weight: bold;
        color: #4CAF50;
        margin: 10px 0;
        padding: 5px;
        border: 1px solid #4CAF50;
        border-radius: 4px;
        background-color: #f8fff8;
    }
    .katex-hidden {
        display: none;
    }
</style>

<div id="katex-loader">
    <div class="katex-loading-message">加载数学渲染引擎中...</div>
    <div id="katex-loading-container">
        <div id="katex-loading-bar">30%</div>
    </div>
</div>

<div id="katex-success" class="katex-success-message katex-hidden">
    KATEX数学渲染引擎已加载完成
</div>

<!-- 引入KaTeX CSS和JS，预加载以加快进度 -->
<script>
    // 立即开始加载进度
    updateProgress(30);
    
    // 控制加载进度条的函数，超快速度
    function updateProgress(percentage) {
        var progressBar = document.getElementById('katex-loading-bar');
        if (progressBar) {
            progressBar.style.width = percentage + '%';
            progressBar.innerText = percentage + '%';
            
            // 当进度达到100%时，完成加载
            if (percentage >= 100) {
                setTimeout(function() {
                    document.getElementById('katex-loader').classList.add('katex-hidden');
                    document.getElementById('katex-success').classList.remove('katex-hidden');
                    if (window.renderMathInElement) {
                        renderMath();
                    }
                }, 1000); // 减少延迟到100ms
            }
        }
    }
    
    // 渲染数学公式
    function renderMath() {
        renderMathInElement(document.body, {
            delimiters: [
                {left: "$$", right: "$$", display: true},
                {left: "$", right: "$", display: false},
                {left: "\\(", right: "\\)", display: false},
                {left: "\\[", right: "\\]", display: true}
            ],
            throwOnError: false
        });
    }
    
    // 超快速加载保护 - 缩短到1.5秒
    setTimeout(function() {
        if (!document.getElementById('katex-loader').classList.contains('katex-hidden')) {
            updateProgress(100);
        }
    }, 1500);
</script>

<!-- 同步方式加载CSS，加快显示速度 -->
<link rel="stylesheet" href="https://www.q2019.com/q2019_script/npm/katex/katex.min.css">
<script>updateProgress(60);</script>

<!-- 快速加载JS文件 -->
<script>
    // 使用JavaScript动态加载脚本，有更好的进度控制
    var script1 = document.createElement('script');
    script1.src = 'https://www.q2019.com/q2019_script/npm/katex/katex.min.js';
    script1.onload = function() { 
        updateProgress(85);
        var script2 = document.createElement('script');
        script2.src = 'https://www.q2019.com/q2019_script/npm/katex/contrib/auto-render.min.js';
        script2.onload = function() { 
            updateProgress(100); 
        };
        document.body.appendChild(script2);
    };
    document.body.appendChild(script1);
</script>

下面是加了进度条的版本，我直接方一个gitlab的链接。

效果展示

下面是一些Latex格式的公式，做展示

爱因斯坦质能方程

$E=mc^2$

$E=mc^2$

极限的定义函数：

$\frac{d}{dx}f(x) = \lim_{h \to 0}\frac{f(x+h) - f(x)}{h}$

$\frac{d}{dx}f(x) = \lim_{h \to 0}\frac{f(x+h) – f(x)}{h}$

备注

请不要直接嵌入本站的Katex.js资源（从别的站点直接调用我这边的Katex.js），万分感谢。

本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议，记得载明出处。
内容有问题？想与我交流下？点此哦，欢迎前来交流~
前端技术提示
上一篇
下一篇

推荐文章

关于AR4机械臂使用-简单的让这个机械臂动起来
Latex中的数学公式的写法
转载：第十六届蓝桥杯大赛线上比赛手册（人工智能）
WINDOWS安装MYSQL数据库并使用DATAGRIP进行连接
windows系统安装SQL SERVER 2022并使用DATAGRIP/SSMS（SQL Server Management Studio)进行连接操作
宝塔面板使用ssh出现paramiko.ssh_exception.SSHException: Incompatible ssh peer (no acceptable host key)报错解决
authentik设置使用gravatar镜像源读取用户头像
LOBECHAT配置使用searxng，让大模型能够进行联网搜索
在UBUNTU上使用docker安装searxng
任天堂外服switch主机在网页解除主机绑定（主帐号机器绑定/常玩的主机绑定）