代码编辑器,强烈推荐使用微软的 VS code,相比Atom开启迅速,使用方便,扩展丰富


第一步: 安装Kramed

hexo 默认的渲染引擎是 marked,但是 marked 不支持 mathjax。,所以需要更换Hexo的markdown渲染引擎为hexo-renderer-kramed引擎,后者支持mathjax公式输出。

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

第二步:更改文件配置

打开/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$$$$');
} 为,直接返回text // Change inline math rule
function formatText(text) {
return text;
}

第三步: 停止使用 hexo-math,并安装mathjax包

卸载hexo-math

npm uninstall hexo-math --save

安装 hexo-renderer-mathjax 包

npm install hexo-renderer-mathjax --save


第四步: 更新 Mathjax 的 配置文件

打开/node_modules/hexo-renderer-mathjax/mathjax.html
如图所示更改<script>为:
即注释掉<script>代码,并把以下代码复制到对应位置

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

第五步: 更改默认转义规则

因为LaTeX与markdown语法有语义冲突,所以 hexo 默认的转义规则会将一些字符进行转义,所以我们需要对默认的规则进行修改.
打开/node_modules\kramed\lib\rules\inline.js
1、

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

更改为

escape: /^\\([`*\[\]()# +\-.!_>])/,

2、

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

更改为

em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

第六步: 开启mathjax

打开/themes/yilia主题目录下的config.yml文件
因为我用的yilia主题,所以路径是/themes/yilia

我们需要在config.yml文件 中开启 Mathjax, 找到 mathjax 字段添加如下代码:(不同的主题配置方法略微有区别)

mathjax:
enable: true

或者

mathjax: true

注意的是:,无论是配置文件还是博客文件,配置项跟配置参数均有有一个空格,否则会配置失败

例:

mathjax: true(mathjax:空格true)
而不是
mathjax:true(mathjax:true)

写博客文件时,要开启 Mathjax选项,, 添加以下内容:

mathjax: true

例如

title: 特征提取——局部特征
date: 2018-07-16 09:39:40
tags: [GitHub, Mysql]
mathjax: true

如下图所示

通过以上步骤,我们就可以在 hexo 中使用 Mathjax 来书写数学公式。

效果展示:

参考文章1
参考文章2

#我的个人博客主页,欢迎访问
#我的CSDN主页,欢迎访问
#我的简书主页,欢迎访问
#我的GitHub主页,欢迎访问

使用LaTex添加公式到Hexo博客里的更多相关文章

  1. hexo博客MathJax公式渲染问题

    这个问题自己很早以前便碰到了,用MathJax语法写的一些公式,在本地Markdown编译器上渲染是没问题的,可是部署到hexo博客中就出现问题了,之前我是使用图片代替公式应付过去了,今天从网上找了一 ...

  2. 【干货】2个小时教你hexo博客添加评论、打赏、RSS等功能 (转)

    备注:该教程基于Hexo 2.x版本,目前Hexo是3.x版本,照本教程实现有可能会出现404错误,笔者目前还未找时间去解决,待笔者找时间解决该问题后,再写一篇该问题的解决教程,给各位读者带来困扰,还 ...

  3. Hexo博客maupassant主题添加Google Adsense广告

    自从在 Github Page 落户以后,很长一段时间使用的是极简且有点艺术范儿的 fexo 主题,而不是大名鼎鼎的 next 主题.后来偶然发现了符合我审美的Hexo博客 maupassant 主题 ...

  4. hexo博客添加gitalk评论系统

      经过了一天的折腾,我终于为自己的博客添加上了评论系统.坦率的讲,为什么网上那么多方案我还要自己写一篇博客,那就是因为他们说的都有bug,所以我要自己总结一下.   我选用的是gitalk评论系统, ...

  5. 搭建hexo博客遇到的问题

    搭建hexo博客遇到的问题 常用命令 hexo clean 清除hexo缓存 hexo generate 生成文章 hexo deploy 部署 hexo new post name 新建文章名 he ...

  6. hexo博客进阶-相册和独立域名

    之前我已经写了一篇文章详细的讲述了如何使用hexo搭建github博客.如果还没有看的可以去看看,hexo搭建博客 其实,根据这篇文章的过程我们就能够搭建一个专属于自己,并且非常美观的博客了.但是如果 ...

  7. ubuntu安装hexo博客

    ubuntu下安装hexo博客 一 安装git sudo apt-get install git 二 安装nodejs 官网下载linux安装包.tar.gz文件 解压 tar zxvf 这样变可以切 ...

  8. 史上最详细“截图”搭建Hexo博客并部署到Github

    http://jingyan.baidu.com/article/d8072ac47aca0fec95cefd2d.html 大家也搭建过博客,很多时候,按着教程来做就可以了,但是我当时为了搭建Hex ...

  9. 史上最详细“截图”搭建Hexo博客——For Windows

    http://angelen.me/2015/01/23/2015-01-23-%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86%E2%80%9C%E6%88 ...

  10. [原创]HEXO博客搭建日记

    博客系统折腾了好久,使用过Wordpress,Ghost,Typecho,其中Typecho是我使用起来最舒心的一种,Markdown编辑+轻量化设计,功能不多不少刚好,着实让我这种强迫症患者舒服了好 ...

随机推荐

  1. 从ReentrantLock角度解析AQS

    是它,是它,就是它,并发包的基石: 一.概述 闲来不卷,随便聊一点. 一般情况下,大家系统中至少也是JDK8了,那想必对于JDK5加入的一系列功能并不陌生吧.那时候重点加入了java.util.con ...

  2. 你真的懂synchronized锁?

    1. 前言 synchronized在我们的程序中非常的常见,主要是为了解决多个线程抢占同一个资源.那么我们知道synchronized有多种用法,以下从实践出发,题目由简入深,看你能答对几道题目? ...

  3. MySQL(一)Linux下MySQL的安装

    Linux下MySQL的安装 1 MySQL的安装 1.1 Linux系统以及工具的准备 这里使用两台CentOS7虚拟机,一台安装8.0版本,另一台克隆的虚拟机安装5.7版本 克隆的虚拟机需要进行配 ...

  4. vulnhub靶场之CROSSROADS: 1

    准备: 攻击机:虚拟机kali.本机win10. 靶机:Crossroads: 1,下载地址:https://download.vulnhub.com/crossroads/crossroads_vh ...

  5. Ubuntu Server搭建个人服务器

    Ubuntu Server20.04.5 LTS [参考资料] Ubuntu官方地址:https://www.ubuntu.com/ Ubuntu论坛地址:https://ubuntuforums.o ...

  6. springboot注解@PostContruct以及@Cacheable

    1.@PostContruct @PostConstruct和@PreDestroy两个注解被用来修饰一个非静态的void()方法. @PostConstruct 加该注解会在项目启动的时候执行该方法 ...

  7. Gradio入门到进阶全网最详细教程[二]:快速搭建AI算法可视化部署演示(侧重参数详解和案例实践)

    Gradio入门到进阶全网最详细教程[二]:快速搭建AI算法可视化部署演示(侧重参数详解和案例实践) 相关文章:Gradio入门到进阶全网最详细教程[一]:快速搭建AI算法可视化部署演示(侧重项目搭建 ...

  8. vue2中使用composition-api

    vue2中使用composition-api https://juejin.cn/post/6874927606820274184 vue3.0 watch 函数 https://www.jiansh ...

  9. 从案例中详解go-errgroup-源码

    一.背景 某次会议上发表了error group包,一个g失败,其他的g会同时失败的错误言论(看了一下源码中的一句话The first call to return a non-nil error c ...

  10. #PowerBi 1分钟学会,在excel中,调用powerbi数据模型(Analyze in Excel插件)

    在工作中,我们常常使用excel来进行临时的数据处理服务,如果我们在powerbi中,已经有了完整的数据模型. 那么我们都可以通过直接调用powerbi数据模型,来进行快速的数据分析,完成任务. 今天 ...