hexo博客MathJax公式渲染问题
这个问题自己很早以前便碰到了,用MathJax语法写的一些公式,在本地Markdown编译器上渲染是没问题的,可是部署到hexo博客中就出现问题了,之前我是使用图片代替公式应付过去了,今天从网上找了一下资料,发现了其问题所在,同时也解决了这个问题。
问题
hexo默认使用hexo-renderer-marked引擎去渲染网页,它会把利用Markdown语法写的文本去转换为相应的html标签。在利用Markdown写MathJax公式的时候,经常会用到下划线_
表示下标,但是下划线_
会被hexo的默认引擎hexo-renderer-marked渲染成html中的<em>
标签,表示斜体,这样一来,我们写的MathJax公式就被错误渲染了,也就没办法正确显示出来。
例如:
在我写的KMP算法这篇文章中,没有解决问题之前,出现着各种渲染错误,而当你仔细观察那些错误之处时,会发现你写的MathJax公式中的下划线_
会莫名其妙地消失。
下图是我利用Markdown编译器写的文本
是表格的一部分,在Markdown编译器预览是正确的,如下图
但是部署到hexo博客后,便出现了错误,呈现的效果如下图
我们发现公式没有渲染成功,仔细观察这个式子特征,发现它和我之前写的相比,少了部分_
,打开该网页源代码,定位到这里,如下图
会发现缺少的_
其实是被hexo的渲染引擎渲染成了html中的<em>
标签,这样一来,这个公式就不完整了,那么也就不能正确显示了。
解决方法
从上面的分析,我们可以知道问题或许出在hexo的渲染引擎上,如果渲染引擎不把公式中的一些特殊字符渲染成html标签,也就避免了这个问题。当然已经有人意识到了这个问题,并且对原先的渲染引擎进行了改进,生成了新的hexo-renderer-kramed引擎,这里是它的Github页面,所以我们只需要卸载默认引擎,并安装这个新的渲染引擎即可。
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save
我之前写有一篇KMP算法,就是在这里发现的渲染出错问题,当我把渲染引擎更换之后,发现大部分公式都正确渲染了,而从网上其他人的叙述中,也同样提到了这个问题,即是行间公式都没有问题,但是个别行内公式还会出现渲染出错,从网上找到了一个方法,解决了这一问题。
定位到你的博客根目录,找到../node_modules/kramed/lib/rules/inline.js文件,
进行部分修改:
//escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/, 第11行,将其修改为
escape: /^\\([`*\[\]()#$+\-.!_>])/,
//em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/, 第20行,将其修改为
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
它取消了该渲染引擎对\,{,}
的转义,然后再hexo clean、hexo g
重新部署,即可解决问题。
另外需要注意一点,对于需要用到MathJax公式的文章,要在Front-matter中打开MathJax开关,例如:
---
date: 2017/8/3 18:20:00
tags: hexo
mathjax: true
title: hexo博客MathJax公式渲染
---
MathJax公式语法
下面呢,我整理总结了一番比较常用的MathJax公式语法,同时也可以用来测试一下渲染效果。
符号 | 释义 | 测试用例 | 最终效果 |
---|---|---|---|
^ | 上标 | x{yz}=(1+ex){-2xy^w} | $ x{yz}=(1+ex){-2xy^w} $ |
_ | 下标 | CO_2 | $ CO_2 $ |
\frac{分子}{分母} or 分子 \over 分母 | 分数 | f(x,y,z)=3y2z(3+\frac{7x+5}{1+y2}) | $ f(x,y,z)=3y2z(3+\frac{7x+5}{1+y2}) $ |
\sqrt[根指数,省略时为2]{被开方数} | 开方 | \sqrt{2}、\sqrt[3]{9} | \(\sqrt{2} 、\sqrt[3]{9}\) |
\ldots | 与文本底线对齐的省略号 | x_1x_2{\ldots}x_n | \(x_1x_2{\ldots}x_n\) |
\cdots | 与文本中线对齐的省略号 | x_1x_2{\cdots}x_n | \(x_1x_2{\cdots}x_n\) |
\int_积分下限^积分上限(被积表达式) | 积分 | \int_1n{x2}dx | $ \int_1n{x2}dx $ |
\sum_{下标表达式}^{上标表达式} {累加表达式} | 累加 | \sum_{i=1}^n \frac{1}{i^2} | $ \sum_{i=1}^n \frac{1}{i^2} $ |
\, or ; or \quad or \qquad | 不同宽度的空格 | a , b \mid a ; b \mid a \quad b \mid a \qquad b | $ a , b \mid a ; b \mid a \quad b \mid a \qquad b $ |
\color{颜色}{文字} | 更改文字颜色 | \color{red}{红色} | $ \color{red}{红色} $ |
上面的一些基本语法使用了行内公式, 渲染效果没有问题,下面再利用行间公式写一些较为复杂的公式。
分段函数
分段函数格式为f(x)=\begin{cases}语句1\\语句2\\...\end{cases}
\text{文字}
中仍可以使用$公式$
去插入其他公式,所以可以将其结合分段函数一起使用。
实例:
md文本
$$
f(n)=\begin{cases}
n/2, & \text{如果$ x<=2 $}\\
3n+1, & \text{如果$ x>2 $}
\end{cases}
$$
最终效果
n/2, & \text{如果$ x<=2 $}\\
3n+1, & \text{如果$ x>2 $}
\end{cases}
\]
大括号和小括号
()、[]、{}
表示的即是符号本身,使用\{\}
来表示{}
。但是如果要显示大号的括号时,需要使用\left
和\right
命令。
实例:
- 正常括号
md文本
$$
f([\frac{1+\{x,y\}}{(\frac{x}{y}+\frac{y}{x})(u+1)}+a]^{3\2})
$$
最终效果
\]
- 大括号
md文本
$$
f\left(
\left[
\frac{
1+\left\{x,y\right\}
}{
\left(
\frac{x}{y}+\frac{y}{x}
\right)
\left(u+1\right)
}+a
\right]^{3\2}
\right)
$$
最终效果
\left[
\frac{
1+\left\{x,y\right\}
}{
\left(
\frac{x}{y}+\frac{y}{x}
\right)
\left(u+1\right)
}+a
\right]^{3\2}
\right)
\]
添加删除线
使用删除线功能必须使用行间公式,删除线分为片段删除线和整段删除线,样式比较多,在这里我只列举一种比较常用的水平删除线,它属于整段删除线的一种。
整段删除线使用\require{enclose}
来显示,声明整段删除线后,使用\enclose{删除线效果}{字符}
来实现删除线效果,而水平删除线效果用关键字horizontalstrike
。
实例:
md文本
$$
\require{enclose}\begin{array}{}
\enclose{horizontalstrike}{x+y}\\
\enclose{horizontalstrike}{x*y}\\
\end{array}
$$
最终效果
\enclose{horizontalstrike}{x+y}\\
\enclose{horizontalstrike}{x*y}\\
\end{array}
\]
注意事项
我在更换hexo的渲染引擎的时候,还出了一点问题,当我卸载了原先的渲染引擎,安装新的时,出了错误,如下图:
它显示我的npm
版本为v4.2.0
,我将npm
更新到了最新版本,再次安装,便没有问题了。
通过这篇文章和KMP算法,里面也涉及了较多的MathJax公式,从效果上来看,都没有出现什么问题,这也说明了该方法还是有一定的效果的。
参考资料
hexo博客MathJax公式渲染问题的更多相关文章
- 搭建hexo博客遇到的问题
搭建hexo博客遇到的问题 常用命令 hexo clean 清除hexo缓存 hexo generate 生成文章 hexo deploy 部署 hexo new post name 新建文章名 he ...
- 在Github上面搭建Hexo博客(一):部署到Github
什么是Hexo Hexo是一个基于Node.js的静态博客程序,可以方便的生成静态网页托管在Github和Heroku上.并且有很多人为其制作了很多优秀的主题(theme),你可以根据自己的喜好进行设 ...
- Hexo 博客 github.io MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- 树莓派搭建 Hexo 博客(一)
Hexo 一个开源的博客框架,本文记录了一下在树莓派上搭建 Hexo 博客的过程. 什么是 Hexo? Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解 ...
- hexo博客谷歌百度收录踩坑日记
title: hexo博客谷歌百度收录踩坑日记 toc: false date: 2018-04-17 00:09:38 百度收录文件验证 无论怎么把渲染关掉或者render_skip都说我的格式错误 ...
- U盘便携式hexo&博客搭建&极速纯净低bug主题推荐&部署到coding&SEO优化搜索
指南:U盘便携式hexo&博客搭建&极速纯净低bug主题推荐&部署到coding&SEO优化搜索 U盘便携式hexo随处写博客 简述:在任意一台联网的电脑上续写he ...
- 使用 statcounter 统计 Hexo 博客访问量
介绍 statcounter是一个提供网站访问统计服务的网站: StatCounter is a simple but powerful real-time web analytics service ...
- hexo博客yili主题个性化自定义教程(1) ——借鉴中学习,初认yili主题
文章转载于:hexo博客yili主题个性化自定义教程(1) --借鉴中学习,初认yili主题 这个博客跌跌撞撞也弄了好多天了,由于Next主题不知道什么情况,被我玩坏了.所以换了一个主题. 大名鼎鼎的 ...
- w10环境下Hexo博客搭建
w10使用hexo+github手把手搭建自己的第一个博客 对一个程序员来说,博客的重要性不言而喻,不但可以积累知识,还可以更好的给别人分享自己的心得.今天就以时下比较流行的hexo博客搭建属于自己的 ...
随机推荐
- scrapy配置
scrapy配置 增加并发 并发是指同时处理的request的数量.其有全局限制和局部(每个网站)的限制. Scrapy默认的全局并发限制对同时爬取大量网站的情况并不适用,因此您需要增加这个值. 增加 ...
- org.apache.commons.lang3 的随机数生成
apache org.apache.commons.lang3 的随机数生成工具,方便使用. String a12 = RandomStringUtils.random(4, "012345 ...
- img如果没有图片显示默认图片效果
img如果没有图片显示默认图片效果<img src="本来要显示的图片URL" onerror="this.src='图片挂了的话要显示的默认图片URL'" ...
- Flash TextField selectable bug block TextEvent.Link solution
There is an old version Felx SDK bug(in my case it's Flex SDK v3.3.0.4852) that when TextField.selec ...
- win7休眠的开启与关闭方法
从开始菜单中找到“附件→命令提示符”,右击选择“以管理员身份运行”,此时可能需要输入管理员密码或进行UAC确认,手工输入如下命令:powercfg -a,从这里可以清楚的看到,计算机是支持休眠的,只是 ...
- selenium及webdriver的原理
主要内容转自:http://blog.csdn.net/ant_ren/article/details/7968582和http://blog.csdn.net/ant_ren/article/det ...
- (cljs/run-at (JSVM. :browser) "命名空间就这么简单")
前言 一个cljs文件定义一个命名空间,通过命名空间可以有效组织代码,这是构建大型系统必备的基础设施.本篇我们就深入理解cljs中的命名空间吧! 好习惯从"头"开始 每个cljs ...
- [leetcode-474-Ones and Zeroes]
In the computer world, use restricted resource you have to generate maximum benefit is what we alway ...
- 【LeetCode】91. Decode Ways
题目: A message containing letters from A-Z is being encoded to numbers using the following mapping: ' ...
- 【Android Developers Training】 62. 搭建一个OpenGL ES环境
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...