现在已经可以实现typora输入数学公式，又出现了hexo无法显示数学公式的问题

补充，typora构建流程图的语法，但hexo又无法显示流程图的问题

无法显示公式

Hexo 默认使用 hexo-renderer-marked 引擎渲染网页，该引擎会把一些特殊的 markdown 符号转换为相应的 html 标签，比如在 markdown 语法中，下划线_代表斜体，会被渲染引擎处理为<em>标签。

因为类 Latex 格式书写的数学公式下划线_表示下标，有特殊的含义，如果被强制转换为<em>标签，那么 MathJax 引擎在渲染数学公式的时候就会出错。

类似的语义冲突的符号还包括*, {, }, \\等。

1. 安装

更换 Hexo 的 markdown 渲染引擎，hexo-renderer-kramed 引擎是在默认的渲染引擎 hexo-renderer-marked 的基础上修改了一些 bug ，两者比较接近，也比较轻量级。

1 2	cnpm uninstall hexo-renderer-marked --save cnpm install hexo-renderer-kramed --save

执行上面的命令即可，先卸载原来的渲染引擎，再安装新的。

2. 修改

打开node_modules/hexo-renderer-kramed/lib/renderer.js，将

// Change inline math rule
function formatText(text) {
    // Fit kramed's rule: $$ + \1 + $$
    return text.replace(/`\$(.*?)\$`/g, '$$$$$1$$$$');
}

修改为：

// Change inline math rule
function formatText(text) {
    return text;
}

3. 卸载

重装mathjax渲染插件

1 2	cnpm uninstall hexo-math --save cnpm install hexo-renderer-mathjax --save

4. 修改

打开node_modules/hexo-renderer-mathjax/mathjax.html，将 <script> 改为：

1	<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>

打开node_modules/kramed/lib/rules/inline.js:

首先修改escape：

1
2
3

escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
改为：
escape: /^\\([`*\[\]()# +\-.!_>])/,

然后修改em：

1
2
3

em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
改为：
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

5. 在 Next 主题中开启 MathJax 开关

如果使用了主题，别忘了在主题（Theme）中开启 MathJax 开关，下面以 next 主题为例，介绍下如何打开 MathJax 开关。

进入到主题目录，找到 _config.yml 配置问题，把 mathjax 默认的 false 修改为true，具体如下：

1 2	mathjax: enable: true

无法显示流程图

1. 安装插件

1	cnpm install hexo-filter-mermaid-diagrams --save

1	cnpm install hexo-filter-flowchart --save

2. 配置插件选项

在站点配置文件_config.yml中，追加或修改meimaid的配置。

# mermaid chart
mermaid: ## mermaid url https://github.com/knsv/mermaid
  #打开Mermaid功能，默认为true
  enable: true  
  # 默认mermaid.js的版本v7.1.2，建议不修改
  version: "7.1.2" 
  # 建议从https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
  # 查找更多选项
  options:  
    # 在网页的default true
    #startOnload: true

3. 把`Mermaid`代码植入布局文件

在[站点]\themes\next\layout\_scripts\目录下建立模板文件mermaid.swig文件。

{% if theme.mermaid.enable %}
  <script src='https://unpkg.com/mermaid@{{ theme.mermaid.version}}/dist/mermaid.min.js'></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({{ JSON.stringify(theme.mermaid.options) }});
    }
  </script>
{% endif %}