由于靜態(tài)網(wǎng)站的某些功能有限,所以我們需要第三方服務(wù)來擴(kuò)展我們的網(wǎng)站。在任何時(shí)候,你都可以使用 NexT 支持的第三方服務(wù)來擴(kuò)展所需的功能。
Next 提供了兩個(gè)渲染引擎來顯示數(shù)學(xué)方程: MathJax 和 KaTeX。
要使用這個(gè)特性,您只需要選擇一個(gè)渲染引擎并打開它的 enable(位于heme config file)。 然后你需要安裝相應(yīng)的 Hexo 渲染器來完全支持?jǐn)?shù)學(xué)方程式的顯示-只開啟啟用可能不會(huì)讓你正確地看到顯示的方程式。 相應(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 → 它只會(huì)渲染那些含有
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 提供了兩個(gè)渲染引擎: 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 還不完善, 暫時(shí)不建議使用.
與 MathJax 相比,KaTeX 引擎是一個(gè)更快的數(shù)學(xué)渲染引擎,而且沒有 JavaScript 它也能生存。
- 需要卸載原始渲染器 hexo-renderer
$ npm un hexo-renderer-marked
- 如果你使用 KaTeX 渲染數(shù)學(xué)公式,你需要安裝渲染器選中的一個(gè):
$ npm i hexo-renderer-markdown-it-plus # or hexo-renderer-markdown-it
- 在主題配置文件中,選擇 katex 作為渲染引擎。
math:
...
katex:
enable: true
- 運(yùn)行標(biāo)準(zhǔn) Hexo 生成、部署進(jìn)程或啟動(dòng)服務(wù)器:
$ hexo clean && hexo g -d
# or hexo clean && hexo s
Plugins 插件
Next 還集成了一些 MathJax 和 KaTeX 的插件,可以通過設(shè)置 CDN url 輕松配置它們。
Mhchem 是 MathJax 的第三方擴(kuò)展,是一個(gè)可以輕松寫出漂亮的化學(xué)方程式的工具。MathJax/mhchem Manual.
Katex 的 Copy-tex 擴(kuò)展修改了任何支持剪貼板 API 的瀏覽器中的復(fù)制 / 粘貼行為,這樣,當(dāng)選擇和復(fù)制整個(gè) KaTeX 渲染的元素時(shí),結(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 時(shí)候會(huì)出現(xiàn)三次, 因此 head 中不建議使用 math
- 如果你在你的 post's title 中使用 math,它不會(huì)被渲染
Examples 例子
在 MathJax 中對(duì)方程進(jìn)行編號(hào)和引用
在 NexT 的新版本中,我們?cè)黾恿俗詣?dòng)等式編號(hào)的功能,以便有機(jī)會(huì)參考該等式。 下面我們將簡要描述如何使用這個(gè)特性。
一般來說,要使自動(dòng)方程式編號(hào)工作,您必須將 LaTeX 方程式包裝在方程式環(huán)境中。 使用簡單的老式方法(例如,用兩個(gè)美元符號(hào)包裝一個(gè)方程式)是行不通的。 如何引用一個(gè)等式? 只需給出一個(gè) label {}標(biāo)記,然后在后面的文本中,使用 ref {}或 eqref {}來引用它。 使用 eqref {}是首選的,因?yàn)槿绻褂?ref {} ,則方程數(shù)周圍沒有括號(hào)。 下面是方程式編號(hào)的一些常見場景。
簡單方程式
$$\begin{equation}
e=mc^2
\end{equation}$$
Multi-line Equation 多行方程
對(duì)于多行方程,在方程式環(huán)境中,您可以使用aligned將其分割為多行:
$$\begin{equation}
\begin{aligned}
a &= b + c \\
&= d + e + f + g \\
&= h + i
\end{aligned}
\end{equation}$$
多重對(duì)齊方程
我們可以用 align 來排列多個(gè)方程,每個(gè)方程都有自己的數(shù)字。
$$\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}{藏青色}$
字體特效設(shè)置
$\bf{加粗}$
$\underline{下劃線}$
$\enclose{horizontalstrike}{刪除線} $
$\enclose{verticalstrike}{刪\\除\\線} $
$\enclose{updiagonalstrike}{刪除線} $
$\enclose{downdiagonalstrike}{刪除線} $
$\enclose{updiagonalstrike,downdiagonalstrike}{刪除線} $
$\enclose{horizontalstrike,verticalstrike}{\;\ 刪\\刪除線\\\;\ 線} $
$\enclose{updiagonalstrike,downdiagonalstrike,horizontalstrike,verticalstrike}{刪除線}$
補(bǔ)充:刪除線可以多種形式搭配使用
額外:設(shè)置字號(hào)
參考
next 主題官網(wǎng)
https://theme-next.org/