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

由于靜態(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 它也能生存。

  1. 需要卸載原始渲染器 hexo-renderer
$ npm un hexo-renderer-marked
  1. 如果你使用 KaTeX 渲染數(shù)學(xué)公式,你需要安裝渲染器選中的一個(gè):
$ npm i hexo-renderer-markdown-it-plus # or hexo-renderer-markdown-it
  1. 在主題配置文件中,選擇 katex 作為渲染引擎。
math:
  ...
  katex:
    enable: true
  1. 運(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.

注意:

  1. Displayed Math (i.e. $$...$$)需要以新行開始, 換言之before the opening $$and after the ending $$不能出現(xiàn)任何非空白字符
  2. 不支持 Unicode 編碼
  3. Inline Math (..$...$) 不能包含空格 after the opening $ and before the ending $ (comment #32).
  4. Heading中使用 math, 在使用 toc 時(shí)候會(huì)出現(xiàn)三次, 因此 head 中不建議使用 math
  5. 如果你在你的 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}$$

\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}$$

\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}$$

\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}{刪除線}

補(bǔ)充:刪除線可以多種形式搭配使用

額外:設(shè)置字號(hào)

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

參考

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

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容