zoukankan      html  css  js  c++  java
  • hexo博客MathJax公式渲染问题

    这个问题自己很早以前便碰到了,用MathJax语法写的一些公式,在本地Markdown编译器上渲染是没问题的,可是部署到hexo博客中就出现问题了,之前我是使用图片代替公式应付过去了,今天从网上找了一下资料,发现了其问题所在,同时也解决了这个问题。

    问题

    hexo默认使用hexo-renderer-marked引擎去渲染网页,它会把利用Markdown语法写的文本去转换为相应的html标签。在利用Markdown写MathJax公式的时候,经常会用到下划线_表示下标,但是下划线_会被hexo的默认引擎hexo-renderer-marked渲染成html中的<em>标签,表示斜体,这样一来,我们写的MathJax公式就被错误渲染了,也就没办法正确显示出来。

    例如:

    在我写的KMP算法这篇文章中,没有解决问题之前,出现着各种渲染错误,而当你仔细观察那些错误之处时,会发现你写的MathJax公式中的下划线_会莫名其妙地消失。
    下图是我利用Markdown编译器写的文本

    是表格的一部分,在Markdown编译器预览是正确的,如下图

    但是部署到hexo博客后,便出现了错误,呈现的效果如下图

    我们发现公式没有渲染成功,仔细观察这个式子特征,发现它和我之前写的相比,少了部分_,打开该网页源代码,定位到这里,如下图

    会发现缺少的_其实是被hexo的渲染引擎渲染成了html中的<em>标签,这样一来,这个公式就不完整了,那么也就不能正确显示了。

    解决方法

    从上面的分析,我们可以知道问题或许出在hexo的渲染引擎上,如果渲染引擎不把公式中的一些特殊字符渲染成html标签,也就避免了这个问题。当然已经有人意识到了这个问题,并且对原先的渲染引擎进行了改进,生成了新的hexo-renderer-kramed引擎,这里是它的Github页面,所以我们只需要卸载默认引擎,并安装这个新的渲染引擎即可。

    npm uninstall hexo-renderer-marked --save
    npm install hexo-renderer-kramed --save
    

    我之前写有一篇KMP算法,就是在这里发现的渲染出错问题,当我把渲染引擎更换之后,发现大部分公式都正确渲染了,而从网上其他人的叙述中,也同样提到了这个问题,即是行间公式都没有问题,但是个别行内公式还会出现渲染出错,从网上找到了一个方法,解决了这一问题。
    定位到你的博客根目录,找到../node_modules/kramed/lib/rules/inline.js文件,

    进行部分修改:

    //escape: /^\([\`*{}[]()#$+-.!_>])/,      第11行,将其修改为
    escape: /^\([`*[]()#$+-.!_>])/,
    //em: /^_((?:__|[sS])+?)_|^*((?:**|[sS])+?)*(?!*)/,    第20行,将其修改为
    em: /^*((?:**|[sS])+?)*(?!*)/,
    

    它取消了该渲染引擎对\,{,}的转义,然后再hexo clean、hexo g重新部署,即可解决问题。

    另外需要注意一点,对于需要用到MathJax公式的文章,要在Front-matter中打开MathJax开关,例如:

    ---
    date: 2017/8/3 18:20:00
    tags: hexo
    mathjax: true
    title: hexo博客MathJax公式渲染
    ---
    

    MathJax公式语法

    下面呢,我整理总结了一番比较常用的MathJax公式语法,同时也可以用来测试一下渲染效果。

    符号 释义 测试用例 最终效果
    ^ 上标 x{yz}=(1+ex){-2xy^w} $ x{yz}=(1+ex){-2xy^w} $
    _ 下标 CO_2 $ CO_2 $
    frac{分子}{分母} or 分子 over 分母 分数 f(x,y,z)=3y2z(3+frac{7x+5}{1+y2}) $ f(x,y,z)=3y2z(3+frac{7x+5}{1+y2}) $
    sqrt[根指数,省略时为2]{被开方数} 开方 sqrt{2}、sqrt[3]{9} (sqrt{2} 、sqrt[3]{9})
    ldots 与文本底线对齐的省略号 x_1x_2{ldots}x_n (x_1x_2{ldots}x_n)
    cdots 与文本中线对齐的省略号 x_1x_2{cdots}x_n (x_1x_2{cdots}x_n)
    int_积分下限^积分上限(被积表达式) 积分 int_1n{x2}dx $ int_1n{x2}dx $
    sum_{下标表达式}^{上标表达式} {累加表达式} 累加 sum_{i=1}^n frac{1}{i^2} $ sum_{i=1}^n frac{1}{i^2} $
    \, or ; or quad or qquad 不同宽度的空格 a , b mid a ; b mid a quad b mid a qquad b $ a , b mid a ; b mid a quad b mid a qquad b $
    color{颜色}{文字} 更改文字颜色 color{red}{红色} $ color{red}{红色} $

    上面的一些基本语法使用了行内公式, 渲染效果没有问题,下面再利用行间公式写一些较为复杂的公式。

    分段函数

    分段函数格式为f(x)=egin{cases}语句1\语句2\...end{cases}
    ext{文字}中仍可以使用$公式$去插入其他公式,所以可以将其结合分段函数一起使用。

    实例:
    md文本

     $$ 
    f(n)=egin{cases}
    n/2, & 	ext{如果$ x<=2 $}\
    3n+1, & 	ext{如果$ x>2 $}
    end{cases}
    $$
    

    最终效果

    [f(n)=egin{cases} n/2, & ext{如果$ x<=2 $}\ 3n+1, & ext{如果$ x>2 $} end{cases} ]

    大括号和小括号

    ()、[]、{}表示的即是符号本身,使用{}来表示{}。但是如果要显示大号的括号时,需要使用left ight命令。

    实例:

    • 正常括号

    md文本

     $$
    f([frac{1+{x,y}}{(frac{x}{y}+frac{y}{x})(u+1)}+a]^{32})
    $$
    

    最终效果

    [f([frac{1+{x,y}}{(frac{x}{y}+frac{y}{x})(u+1)}+a]^{32}) ]

    • 大括号

    md文本

        $$
    fleft(
        left[
            frac{
                1+left{x,y
    ight}
            }{
            left(
                frac{x}{y}+frac{y}{x}
            
    ight)
            left(u+1
    ight)
            }+a
        
    ight]^{32}
    
    ight)
    $$
    

    最终效果

    [fleft( left[ frac{ 1+left{x,y ight} }{ left( frac{x}{y}+frac{y}{x} ight) left(u+1 ight) }+a ight]^{32} ight) ]

    添加删除线

    使用删除线功能必须使用行间公式,删除线分为片段删除线整段删除线,样式比较多,在这里我只列举一种比较常用的水平删除线,它属于整段删除线的一种。

    整段删除线使用 equire{enclose}来显示,声明整段删除线后,使用enclose{删除线效果}{字符}来实现删除线效果,而水平删除线效果用关键字horizontalstrike

    实例:

    md文本

    $$
    
    equire{enclose}egin{array}{}
    enclose{horizontalstrike}{x+y}\
    enclose{horizontalstrike}{x*y}\
    end{array}
    $$
    

    最终效果

    [ equire{enclose}egin{array}{} enclose{horizontalstrike}{x+y}\ enclose{horizontalstrike}{x*y}\ end{array} ]

    注意事项

    我在更换hexo的渲染引擎的时候,还出了一点问题,当我卸载了原先的渲染引擎,安装新的时,出了错误,如下图:


    它显示我的npm版本为v4.2.0,我将npm更新到了最新版本,再次安装,便没有问题了。

    通过这篇文章和KMP算法,里面也涉及了较多的MathJax公式,从效果上来看,都没有出现什么问题,这也说明了该方法还是有一定的效果的。

    原文地址链接

    参考资料

  • 相关阅读:
    contes配置nginx教程
    jquery 图片放大镜,草稿版
    VUE学习第四次
    VUE学习 第三次
    ryu
    ovs & ryu & mininet
    centos安装mininet 和卸载
    端口镜像
    数据中心网络监控小结
    5、Kafka生产过程分析
  • 原文地址:https://www.cnblogs.com/Ai-heng/p/7282110.html
Copyright © 2011-2022 走看看