hiCasper

Truth or happiness,
never both.

按需调用KaTeX渲染数学公式

某些Typecho主题没有添加对于LaTeX数学公式的支持,在这里给出几种手动添加的方法。其他博客如WP,Hexo同理也可使用。

这里给出三种方法添加对于LaTeX公式的支持,可以按要求选用。因为MathJax据说性能较差,所以选用了可汗学院开发的KaTeX来渲染。


直接调用(不推荐)

过于复杂,在官方Github的介绍页面有详细介绍,不做赘述。

自动渲染

我们可以在页面中引入css和js来达到自动渲染的效果。
在</head>前加入

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css">
<script src="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/katex/dist/contrib/auto-render.js"></script>

最后再在html文件的</body>标签前面调用renderMathInElement函数来渲染。

<body>
  ...
  <script>
    renderMathInElement(document.body);
  </script>
</body>

按需调用

第二种方法虽然方便,但是无论打开什么页面都会加载这些文件,在速度上明显就慢了(然而并没有什么区别),所以我们采用按需调用来达到页面内有LaTeX公式时才自动引入css和js文件的方法。

首先在页面头部<head>部分引入css文件

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css">

声明一个方法:

function LoadJS(adr) {
    new_node = document.createElement("script");
    new_node.setAttribute("type","text/javascript");
    new_node.setAttribute("src",adr);
    document.body.appendChild(new_node);
}  //动态引入JS文件

然后在页面的尾部加入以下Javascript:

<script>
    var str = document.getElementsByTagName("article")[0];  //这里根据不同主题调整
        var isKaTex = str.innerHTML.indexOf('$');  //以是否存在 “$”来判断LaTeX公式,可能有误判情况
    if(isKaTex) {
        LoadJS("https://cdn.jsdelivr.net/npm/katex/dist/contrib/auto-render.js");
        LoadJS("https://cdn.jsdelivr.net/npm/katex/dist/katex.min.js");
    }
    //等待DOM加载完成后渲染,避免影响页面加载时间
    window.onload = function() {
        if(isKaTex != -1) renderMathInElement(str,
                        {
                            delimiters: [
                                {left: "$$", right: "$$", display: true},
                                {left: "\\[", right: "\\]", display: true},
                                {left: "$", right: "$", display: false},
                                {left: "\\(", right: "\\)", display: false}
                            ]
                        }
                    );
    }
</script>

更新:

  • 2019.09.20 将bootcdn更换为jsdelivr
本原创文章未经允许不得转载 | 当前页面:hiCasper » 按需调用KaTeX渲染数学公式

评论 1

  1. 没github账号,提一个修复多数据库支持的内容:

    typecho官方对不同数据库的适配方式举例:

    ```php
    /** 修改数据库字段 */
    $adapterName = $db->getAdapterName();
    $prefix = $db->getPrefix();

    switch (true) {
    case false !== strpos($adapterName, 'Mysql'):
    $db->query('ALTER TABLE `' . $prefix . 'contents` ADD `parent` INT(10) UNSIGNED NULL DEFAULT \'0\'', Typecho_Db::WRITE);
    break;

    case false !== strpos($adapterName, 'Pgsql'):
    $db->query('ALTER TABLE "' . $prefix . 'contents" ADD COLUMN "parent" INT NULL DEFAULT \'0\'', Typecho_Db::WRITE);
    break;
    ``

    Typecho-theme-DUX 主题应该只适配了 MySQL.

    `functions.php` 中如下代码:

    ```php
    if (!array_key_exists('views', $db->fetchRow($db->select()->from('table.contents')))) {
    $db->query('ALTER TABLE `' . $prefix . 'contents` ADD `views` INT(10) DEFAULT 0;');
    echo 0;
    return;
    }
    ```

    如果需要支持 PostgreSQL, 需要修改为:

    ```php
    if (!array_key_exists('views', $db->fetchRow($db->select()->from('table.contents')))) {
    $db->query('ALTER TABLE "' . $prefix . 'contents" ADD COLUMN "views" INT NULL DEFAULT \'0\'', Typecho_Db::WRITE);
    echo 0;
    return;
    }
    ```

    yinhe 2020-08-15    回复