Hexo中使用MathJax公式

最近学习数学,想用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,\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公式_第1张图片
发个大红包

原文地址

你可能感兴趣的:(Hexo中使用MathJax公式)