Hexo中使用MathJax公式

作者: 孙亖 | 来源:发表于2017-12-26 08:52 被阅读29次

    最近学习数学,想用Hexo记录笔记整理公式,参考文章:

    我的Hexo环境

    首先,看看我的Hexo环境:

    hexo --version
    

    显示如下:

    hexo: 3.4.3</br>
    hexo-cli: 1.0.4</br>
    os: Windows_NT 10.0.14393 win32 x64</br>
    http_parser: 2.7.0</br>
    node: 8.9.3</br>
    v8: 6.1.534.48</br>
    uv: 1.15.0</br>
    zlib: 1.2.11</br>
    ares: 1.10.1-DEV</br>
    modules: 57</br>
    nghttp2: 1.25.0</br>
    openssl: 1.0.2n</br>
    icu: 59.1</br>
    unicode: 9.0</br>
    cldr: 31.0.1</br>
    tz: 2017b</br>

    安装插件

    npm install hexo-math --save
    

    配置

    math:
      engine: 'mathjax' # or 'katex'
      mathjax:
        src: # "//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
        config:
          # MathJax config
      katex:
        css: #custom_css_source
        js: #custom_js_source # not used
        config:
          # KaTeX config
    

    由于有默认配置,所以src和config的内容为空。

    文章中需要打开公式

    这个我本地环境的公式没有生效,文章的Front-matter里打开mathjax开关后成功激活:

    ---
    title: Hexo中使用MathJax公式
    date: 2017-12-25 13:38:47
    tags: [Hexo,MathJax]
    categories: [技术点滴,Hexo]
    mathjax: true
    ---
    

    公式效果

    完成上面内容后,文章中就能显示公式了,如下所示:
    $$f(x_1,x_x,\ldots,x_n) = x_1^2 + x_2^2 + \cdots + x_n^2 $$

    $f(x_1,x_x,\ldots,x_n) = x_1^2 + x_2^2 + \cdots + x_n^2 $

    $f(x) = 3x + 7$

    $a = b + c$

    $$\frac{\partial u}{\partial t}
    = h^2 \left( \frac{\partial^2 u}{\partial x^2} +
    \frac{\partial^2 u}{\partial y^2} +
    \frac{\partial^2 u}{\partial z^2}\right)$$

    存在问题

    由于markdown中的下划线 _ 是表示斜体,MathJax中 _ 是表示下标,存在冲突,需要在公式的_前加转义字符,否则显示不正常:
    代码:

    $F_a = F_b + F_c + F_{\mu}$
    

    显示:

    $F_a = F_b + F_c + F_u$

    代码:

    $F\_a = F\_b + F\_c + F\_{\mu}$
    

    显示:

    $F_a = F_b + F_c + F_{\mu}$

    或者是使用 {% raw %}{% math %}LaTex Formula{% endmath %}{% endraw %} 来替代 {% raw %}$ LaTex Formula ${% endraw %} 的表达:
    代码:

    {% math %} F_a = F_b + F_c + F_{\mu} {% endmath %}
    

    显示:

    {% math %} F_a = F_b + F_c + F_{\mu} {% endmath %}

    自成一段,可用多行表示,类似 $$ ... $$ :

    {% math %} 
    F_a = F_b + F_c + F_{\mu} 
    {% endmath %}
    

    显示:

    {% math %}
    F_a = F_b + F_c + F_{\mu}
    {% endmath %}

    但是,这种方法不是标准的LaTex语法, hexo-renderer-kramed 这个插件,打开它的Github主页,描述已经说得很清楚,作者fork了 hexo-renderer-marked 项目,并且只针对MathJax支持进行了改进,这正是我们需要的!!

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

    类似的,你还可以使用hexo-renderer-markdown-it来解决这个问题,但是hexo-renderer-markdown-it和hexo-toc会有冲突,需要配置一下解决这个问题:

    # Markdown-it config
    ## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
    markdown:
      render:
        html: true
    

    附录:
    最后这里有一篇通俗易懂的公式编辑教程:

    MathJax使用LaTeX语法编写数学公式教程

    参考资料

    用 Hexo 搭建个人博客-02:进阶试验
    在Hexo中渲染MathJax数学公式
    如何处理Hexo和MathJax的兼容问题

    发个大红包
    原文地址

    相关文章

      网友评论

        本文标题:Hexo中使用MathJax公式

        本文链接:https://www.haomeiwen.com/subject/trkdgxtx.html