Hexo NexT 主題對數(shù)學(xué)公式的支持

由于靜態(tài)網(wǎng)站的某些功能有限，所以我們需要第三方服務(wù)來擴展我們的網(wǎng)站。在任何時候，你都可以使用 NexT 支持的第三方服務(wù)來擴展所需的功能刷允。

Next 提供了兩個渲染引擎來顯示數(shù)學(xué)方程: MathJax 和 KaTeX。

要使用這個特性碧囊，您只需要選擇一個渲染引擎并打開它的 enable(位于heme config file)恃锉。然后你需要安裝相應(yīng)的 Hexo 渲染器來完全支持?jǐn)?shù)學(xué)方程式的顯示-只開啟啟用可能不會讓你正確地看到顯示的方程式。相應(yīng)的 Hexo 渲染引擎將提供如下呕臂。

Settings 設(shè)置

# Math Formulas Render Support
math:
  # Default (false) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in front-matter.
  # If you set it to true, it will load mathjax / katex srcipt EVERY PAGE.
  every_page: false

  mathjax:
    enable: true
    # Available values: none | ams | all
    tags: none

  katex:
    enable: false
    # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
    copy_tex: false

per_page 是控制是否每頁呈現(xiàn)數(shù)學(xué)方程式。

true → Equations will be processed on 每一頁. Even if they not exists on one or another page.

false → 它只會渲染那些含有 mathjax: true 的文章


<!-- This post will render the Math Equations -->
---
title: Will Render Math
mathjax: true
---
....

<!-- This post will NOT render the Math Equations -->
---
title: Not Render Math
mathjax: false
---
....

<!-- This post will NOT render the Math Equations either -->
---
title: Not Render Math Either
---
....

Render Engines 渲染引擎

目前肪跋，NexT 提供了兩個渲染引擎: MathJax 和 KaTeX歧蒋。

MathJax 引擎(推薦)

Firstly, make sure you have installed pandoc (version >= 2.0).

$ npm un hexo-renderer-marked
$ npm i hexo-renderer-pandoc

In theme config file, choose mathjax as render engine.

math:
  ...
  mathjax:
    enable: true

KaTeX 引擎(暫不推薦)

目前在NexT 主題中 KaTeX 還不完善, 暫時不建議使用.

與 MathJax 相比，KaTeX 引擎是一個更快的數(shù)學(xué)渲染引擎州既，而且沒有 JavaScript 它也能生存谜洽。

需要卸載原始渲染器 hexo-renderer

$ npm un hexo-renderer-marked

如果你使用 KaTeX 渲染數(shù)學(xué)公式，你需要安裝渲染器選中的一個:

$ npm i hexo-renderer-markdown-it-plus # or hexo-renderer-markdown-it

在主題配置文件中吴叶，選擇 katex 作為渲染引擎阐虚。

math:
  ...
  katex:
    enable: true

運行標(biāo)準(zhǔn) Hexo 生成、部署進(jìn)程或啟動服務(wù)器:

$ hexo clean && hexo g -d
# or hexo clean && hexo s

Plugins 插件

Next 還集成了一些 MathJax 和 KaTeX 的插件蚌卤，可以通過設(shè)置 CDN url 輕松配置它們实束。

Mhchem 是 MathJax 的第三方擴展，是一個可以輕松寫出漂亮的化學(xué)方程式的工具逊彭。MathJax/mhchem Manual.

Katex 的 Copy-tex 擴展修改了任何支持剪貼板 API 的瀏覽器中的復(fù)制 / 粘貼行為咸灿，這樣，當(dāng)選擇和復(fù)制整個 KaTeX 渲染的元素時侮叮，結(jié)果剪貼板的文本內(nèi)容將呈現(xiàn) KaTeX 元素作為其 LaTeX 源避矢，并由指定的分隔符包圍。更多信息: Copy-tex extension.

注意:

Displayed Math (i.e. $$...$$)需要以新行開始, 換言之before the opening $$and after the ending $$不能出現(xiàn)任何非空白字符
不支持 Unicode 編碼
Inline Math (.. $...$ ) 不能包含空格 after the opening $ and before the ending $ (comment #32).
Heading中使用 math, 在使用 toc 時候會出現(xiàn)三次, 因此 head 中不建議使用 math
如果你在你的 post's title 中使用 math囊榜，它不會被渲染

Examples 例子

在 MathJax 中對方程進(jìn)行編號和引用

在 NexT 的新版本中审胸，我們增加了自動等式編號的功能，以便有機會參考該等式卸勺。下面我們將簡要描述如何使用這個特性砂沛。

一般來說，要使自動方程式編號工作曙求，您必須將 LaTeX 方程式包裝在方程式環(huán)境中尺上。使用簡單的老式方法(例如材蛛，用兩個美元符號包裝一個方程式)是行不通的。如何引用一個等式怎抛？只需給出一個 label {}標(biāo)記卑吭，然后在后面的文本中，使用 ref {}或 eqref {}來引用它马绝。使用 eqref {}是首選的豆赏，因為如果您使用 ref {} ，則方程數(shù)周圍沒有括號富稻。下面是方程式編號的一些常見場景掷邦。

簡單方程式

$$\begin{equation}
e=mc^2
\end{equation}$$

$\begin{equation} e=mc^2 \end{equation}$

Multi-line Equation 多行方程

對于多行方程，在方程式環(huán)境中椭赋，您可以使用aligned將其分割為多行:

$$\begin{equation}
\begin{aligned}
a &= b + c \\
  &= d + e + f + g \\
  &= h + i
\end{aligned}
\end{equation}$$

$\begin{equation} \begin{aligned} a &= b + c \\ &= d + e + f + g \\ &= h + i \end{aligned} \end{equation}$

多重對齊方程
我們可以用 align 來排列多個方程抚岗，每個方程都有自己的數(shù)字。

$$\begin{align}
a &= b + c \label{eq3} \\
x &= yz \label{eq4}\\
l &= m - n \label{eq5}
\end{align}$$

$\begin{align} a &= b + c \label{eq3} \\ x &= yz \label{eq4}\\ l &= m - n \label{eq5} \end{align}$

額外： MarkDown 彩色字體語法

統(tǒng)一表示方法：\color{顏色}{文本}

# *附 上面那種 - MarkDown 彩色字體語法：
$\color{black}{黑色(\text{black})}$
$\color{red}{紅色(\text{red})}$
$\color{blue}{藍(lán)色(\text{blue})}$

$\color{grey}{灰色}$ 
$\color{purple}{紫色}$ 
$\color{olive}{橄欖綠}$ 
$\color{teal}{藍(lán)綠色}$ 
$\color{silver}{銀色}$ 
$\color{lime}{淺綠色}$ 
$\color{navy}{藏青色}$

$\color{black}{黑色(\text{black})}$
$\color{red}{紅色(\text{red})}$
$\color{blue}{藍(lán)色(\text{blue})}$

$\color{grey}{灰色}$
$\color{purple}{紫色}$
$\color{olive}{橄欖綠}$
$\color{teal}{藍(lán)綠色}$
$\color{silver}{銀色}$
$\color{lime}{淺綠色}$
$\color{navy}{藏青色}$

字體特效設(shè)置

$\bf{加粗}$   
$\underline{下劃線}$   
$\enclose{horizontalstrike}{刪除線}    $
$\enclose{verticalstrike}{刪\\除\\線}  $
$\enclose{updiagonalstrike}{刪除線}    $
$\enclose{downdiagonalstrike}{刪除線}  $
$\enclose{updiagonalstrike,downdiagonalstrike}{刪除線} $
$\enclose{horizontalstrike,verticalstrike}{\;\ 刪\\刪除線\\\;\ 線}   $
$\enclose{updiagonalstrike,downdiagonalstrike,horizontalstrike,verticalstrike}{刪除線}$

$\bf{加粗}$
$\underline{下劃線}$
$\enclose{horizontalstrike}{刪除線}$
$\enclose{verticalstrike}{刪\\除\\線}$
$\enclose{updiagonalstrike}{刪除線}$
$\enclose{downdiagonalstrike}{刪除線}$
$\enclose{updiagonalstrike,downdiagonalstrike}{刪除線}$
$\enclose{horizontalstrike,verticalstrike}{\;\ 刪\\刪除線\\\;\ 線}$
$\enclose{updiagonalstrike,downdiagonalstrike,horizontalstrike,verticalstrike}{刪除線}$

補充：刪除線可以多種形式搭配使用

額外：設(shè)置字號

$\Huge{小初字體(36pts)}$
$\huge{一號字體(27.5pts)}$
$\LARGE{二號字體(21pts)}$
$\Large{三號字體(15.75pts)}$
$\large{四號字體(13.75pts)}$
$\normalsize{小四字體(12pts)}$
$默認(rèn)字體(12pts)$
$\small{五號字體(10.5pts)}$
$\scriptsize{六號字體(7.875pts)}$
$\tiny{七號字體(5.25pts)}$

參考

next 主題官網(wǎng)
https://theme-next.org/

theme NexT
https://github.com/next-theme/hexo-theme-next