1. 程式人生 > >使用LaTex新增公式到Hexo部落格裡

使用LaTex新增公式到Hexo部落格裡

程式碼編輯器,強烈推薦使用微軟的 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