博客园markdown公式

博客园插入公式有以下要点：

• $formula$表示行内公式
• $$formula$$表示块级公式
• 使用图片表示公式，知乎也是使用图片表示公式，虽然有一种mathML的标记语言能够表示公式，但是不同浏览器支持程度不一样。
• 不要转义代码里面的公式
• 使用js实现以上过程
• 使用chrome调试时，注意禁用缓存的静态资源

/**
 * 把某个元素中公式字符串转换为图片
 * (function(){})()这种形式可以隐藏本模块所使用到的函数，防止污染外面
 * */
var renderLatex = (function () {
    /**
     * 元素选定
     * */
    function $(ele) {
        return document.querySelector(ele)
    }

    /**
     * 判断字符串s的beg处是否为ss
     * */
    function is(s, beg, ss) {
        var j = 0;
        for (; j < ss.length && beg + j < s.length; j++) {
            if (s[beg + j] != ss[j]) return false;
        }
        return j == ss.length;
    }

    /**
     * 在字符串s中，从beg位置开始寻找下一个waiting元素
     * */
    function waitfor(s, beg, waiting) {
        for (var i = beg; i < s.length; i++) {
            if (is(s, i, waiting)) return i + waiting.length
        }
        return s.length;
    }

    /**
     * 主要解析部分，将“$公式$”替换为行内图片，
     * 将“$$公式$$”替换为块级图片
     * */
    function parse(s) {
        var ans = ''
        for (var i = 0; i < s.length;) {
            if (is(s, i, "$$")) {
                j = waitfor(s, i + 2, "$$")
                ans += getFormulaImage(s.substring(i + 2, j - 2), "block-image")
                i = j
            } else if (is(s, i, "$")) {
                j = waitfor(s, i + 1, "$")
                ans += getFormulaImage(s.substring(i + 1, j - 1), "inline-image")
                i = j
            } else if (is(s, i, "```")) {
                j = waitfor(s, i + 3, "```")
                ans += s.substring(i + 3, j - 3)
                i = j
            } else if (is(s, i, "`")) {
                j = waitfor(s, i + 1, "`")
                ans += s.substring(i + 1, j - 1)
                i = j
            } else if (is(s, i, "<pre")) {
                j = waitfor(s, i + "<pre".length, "</pre>")
                ans += s.substring(i, j)
                i = j
            } else {
                ans += s[i]
                i++
            }
        }
        return ans
    }

    /**
     * 格式化打印字符串
     * */
    function printf(s, dic) {
        for (var i in dic) {
            s = s.replace("${" + i + "}", dic[i])
        }
        return s
    }

    /**
     * 根据latex公式s和图片类型type获取<img>元素
     * */
    function getFormulaImage(s, type) {
        console.log(s)
        var zhihu = "https://www.zhihu.com/equation?tex="
        var codecogs = "http://latex.codecogs.com/svg.latex?"
        var url = encodeURI(codecogs + s)
        var ans = printf("<img class='${type}' src='${src}'  alt='${formula}' />", {type: type, src: url, formula: s})
        return ans
    }

    function render(element) {
        var s = parse($(element).innerHTML)
        console.log(s)
        $(element).innerHTML = s
    }

    return render
})()

参考资料

https://www.cnblogs.com/q735613050/p/7253073.html