Hexo中使用MathJax公式我的Hexo环境安装插件配置文章中需要打开公式公式效果存在问题参考资料

最近学习数学,想用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语法编写数学公式教程

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏吉浦迅科技

CUDA&OpenCL编程7个技巧及ArrayFire如何帮助您

· 向量化代码Vectorized Code: 加速器执行向量化代码性能会很好因为计算自然地映射到硬件的运算内核上。ArrayFire函数本质上是量化的,因此...

4216
来自专栏hbbliyong

检测端口是否被占用

        当我们要创建一个Tcp/Ip Server connection ,我们需要一个范围在1000到65535之间的端口 。 但是本机一个端口只能一...

32010
来自专栏大数据-Hadoop、Spark

hive bucket

hive中table可以拆分成partition, table和partition可以通过CLUSTERED BY 进一步分bucket,bucket中的数据...

982
来自专栏何俊林

【独家】一种手机上实现屏幕录制成gif的方案

前言:一直以来,很多做apk演示效果时,通过图片的方式,总是没有看起来那样炫丽和灵动。如果能在手机上,直接通过录制屏幕,而变成gif。那可是省去了好多时间。进而...

2267
来自专栏机器学习算法工程师

快来操纵你的GPU| CUDA编程入门极简教程

2006年,NVIDIA公司发布了CUDA(http://docs.nvidia.com/cuda/),CUDA是建立在NVIDIA的CPUs上的一个通用并行计...

8464
来自专栏Deep learning进阶路

caffe随记(七)---训练和测试自己的图片

前面也介绍了tools工具,今天来试着自己跑一下图像分类的实例 1、下载数据 我没有用imagenet的数据,因为太大了不想下,而且反正也只是当作例程跑一下而...

2190
来自专栏BioIT-TECH

癌症中克隆种群结构统计推断分析软件PyClone安装小记

PyClone 是一种用于推断癌症中克隆种群结构的统计模型。 它是一种贝叶斯聚类方法,用于将深度测序的体细胞突变集分组到假定的克隆簇中,同时估计其细胞流行率(p...

6552
来自专栏ml

ijg库解码超大型jpeg图片

1. ijg库解码超大型jpeg图片(>100M)的时候,如何避免内存溢出。        采用边解码边压缩的策略,每次解码一行或者若干行图片数据,然后对于这些...

4048
来自专栏沈唁志

文本处理,第2部分:OH,倒排索引

这是我的文本处理系列的第二部分。在这篇博客中,我们将研究如何将文本文档存储在可以通过查询轻松检索的表单中。我将使用流行的开源Apache Lucene索引进行说...

1654
来自专栏拂晓风起

cocos2d-js 越来越慢的定时器schedule 制作不变慢的定时器

1224

扫码关注云+社区

领取腾讯云代金券