小奥的学习笔记

  • Home
  • Learning & Working
    • Speech Enhancement Notes
    • Programming language
    • Computer & DL
    • MOOC
  • Life
    • Life Time
    • Thinking & Comprehension
    • Volunteer
    • Plan
    • Travel
  • Footprints
  • GuestBook
  • About
    • About Me
    • 个人履历
    • 隐私策略
  1. 首页
  2. Study-notes
  3. Programming language
  4. Wordpress
  5. 正文

How to use mathjax in hexo

2019年11月12日 753点热度 0人点赞 0条评论

参考自:https://www.cnblogs.com/wangxin37/p/8185688.html

在主题中手动添加js安装mathjax。

类似所有第三方js插件,js加载方式有两种:

  • 第一种,通过连接CDN加载js代码。好处是省了本地配置js代码,并且每次加载都是最新的,缺点是一旦连接的CDN出问题,可能卡住页面的js加载。
  • 第二种,将js代码下载下来,放到主题的js文件夹中,通过本地相对目录加载。优缺点和第一种方法正相反。

在themes/snippet/layout/_partial 目录中新建mathjax.ejs,填入如下js代码:

<!-- MathJax配置,可通过单美元符号书写行内公式等 -->
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
    "HTML-CSS": { 
        preferredFont: "TeX", 
        availableFonts: ["STIX","TeX"], 
        linebreaks: { automatic:true }, 
        EqnChunk: (MathJax.Hub.Browser.isMobile ? 10 : 50) 
    },
    tex2jax: { 
        inlineMath: [ ["$", "$"], ["\\(","\\)"] ], 
        processEscapes: true, 
        ignoreClass: "tex2jax_ignore|dno",
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
    },
    TeX: {  
        equationNumbers: { autoNumber: "AMS" },
        noUndefined: { attributes: { mathcolor: "red", mathbackground: "#FFEEEE", mathsize: "90%" } }, 
        Macros: { href: "{}" } 
    },
    messageStyle: "none"
    }); 
</script>
<!-- 给MathJax元素添加has-jax class -->
<script type="text/x-mathjax-config">
    MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for(i=0; i < all.length; i += 1) {
            all[i].SourceElement().parentNode.className += ' has-jax';
        }
    });
</script>
<!-- 通过连接CDN加载MathJax的js代码 -->
<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

只在有公式的页面才加载MathJax

有公式才加载MathJax,这点比较重要,没有公式仍然加载js渲染公式,会影响页面加载速度。在所有有公式的文章的front-matter中增加一项配置 mathjax: true,位置是scaffolds目录下的三个md文件。例如

---
title: Leetcode题目解析(191112):200&206
categories:
  - C/C++
tags:
  - Leetcode
  - 算法
comments: false
mathjax: true
date: 2019-11-12 10:39:05
---

然后在themes/snippet/layout/_partial/footer.ejs 中通过此配置变量决定是否加载mathjax.ejs :

<!-- 根据页面mathjax变量决定是否加载MathJax数学公式js -->
<% if (page.mathjax){ %>
<%- partial('mathjax') %>
<% } %>

解决MarkDown与MathJax渲染冲突

Hexo默认的MarkDown渲染引擎hexo-renderer-marked会调用marked模块的marked.js脚本进行最终的解释,这个脚本在Hexo安装后的node_modules\marked\lib\目录中。
有两点修改:

针对下划线的问题,取消作为斜体转义,因为marked.js中*也是斜体的意思,所以取消掉的转义并不影响使用markdown,我平时一般不用斜体,就是用也更习惯用*作为斜体标记。
针对marked.js与Mathjax对于个别字符二次转义的问题,我们只要不让marked.js去转义\,{,}在MathJax中有特殊用途的字符就行了。
编辑node_modules\marked\lib\marked.js 脚本:

【第一步】
将451行的

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

替换为

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

这一步取消了对\,{,}的转义(escape)

【第二步】
将459行的

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

替换为

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

这一步取消了对斜体标记_的转义。

这样带来一个问题就是,以后每次更换电脑,在新电脑上安装完Hexo环境后,都要手动修改marked.js文件。

MathJax公式书写

MathJax公式书写参考
http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference

其它详见参考原文

本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: Hexo mathjax
最后更新:2019年11月12日

davidcheung

这个人很懒,什么都没留下

打赏 点赞
< 上一篇

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复

搜索
欢迎关注我的个人公众号
最新 热点 随机
最新 热点 随机
DEEPFILTERNET:一种基于深度滤波的全频带音频低复杂度语音增强框架 奥地利匈牙利九日游旅程 论文阅读之Study of the General Kalman Filter for Echo Cancellation 小奥看房之鸿荣源珈誉府 杭州往返旅途及西溪喜来登和万怡的体验报告 2022年的第一篇碎碎念
奥地利匈牙利九日游旅程论文阅读之Study of the General Kalman Filter for Echo CancellationDEEPFILTERNET:一种基于深度滤波的全频带音频低复杂度语音增强框架
马云卸任CEO演讲:明天起生活将是我的工作 个人用VB制作了一个计算器,大家来捧场吧 20170428-青岛啤酒博物馆&信号山公园 献出我当年初三的时候的暑假社团活动成果~ 莱芜一中截至目前为止已有198人获得重点大学优惠资格 数据结构【浙江大学】(第7节)整理
标签聚合
Java python学习 Python linux leetcode 学习 生活 算法 鸟哥的linux私房菜 高中
最近评论
davidcheung 发布于 5 个月前(02月09日) The problem has been fixed. May I ask if you can s...
tk88 发布于 5 个月前(02月07日) Hmm is anyone else having problems with the pictur...
cuicui 发布于 9 个月前(10月20日) :wink:
niming 发布于 10 个月前(09月19日) 同级校友,能刷到太巧了
davidcheung 发布于 2 年前(08月16日) 我得找一下我之前整理的word文档看一下,如果找到了我就更新一下这篇文章。
Nolan 发布于 2 年前(07月25日) 您的笔记非常有帮助。贴图不显示了,可以更新一下吗?
davidcheung 发布于 3 年前(06月19日) 到没有看webrtc的代码。现在主要在看我们公司的代码了。。。只是偶尔看一看webrtc的东西。。。
aobai 发布于 3 年前(03月13日) gain_change_hangover_ 应该是每三个block 只能够调整一次,这样保证每帧...
匿名 发布于 5 年前(12月30日) 烫
小奥 发布于 5 年前(12月12日) webRTC里面的NS本身我记得就是在C++里面呀

COPYRIGHT © 2025 小奥的学习笔记. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

陕ICP备19003234号-1

鲁公网安备37120202000100号