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

我的Hexo环境#

首先，看看我的Hexo环境：

hexo --version

显示如下：

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

安装插件#

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}, \dots, x_{n}) = x_{1}^{2} + x_{2}^{2} + \dots + x_{n}^{2}$

$f (x) = 3 x + 7$

$a = b + c$

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

存在问题#

由于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_{μ}$

或者是使用 {% math %}LaTex Formula{% endmath %} 来替代 $L a T e x F o r m u l a$ 的表达：
代码：

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

显示：

$F_{a} = F_{b} + F_{c} + F_{μ}$

自成一段，可用多行表示，类似 $\dots$ ：

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

显示：

$F_{a} = F_{b} + F_{c} + F_{μ}$

但是，这种方法不是标准的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公式

我的Hexo环境#

安装插件#

配置#

文章中需要打开公式#

公式效果#

存在问题#

参考资料#

猜你喜欢