Hexo NexT 主题对数学公式的支持

由于静态网站的某些功能有限,所以我们需要第三方服务来扩展我们的网站。在任何时候,你都可以使用 NexT 支持的第三方服务来扩展所需的功能。

Next 提供了两个渲染引擎来显示数学方程: MathJax 和 KaTeX。

要使用这个特性,您只需要选择一个渲染引擎并打开它的 enable(位于heme config file)。 然后你需要安装相应的 Hexo 渲染器来完全支持数学方程式的显示-只开启启用可能不会让你正确地看到显示的方程式。 相应的 Hexo 渲染引擎将提供如下。

Settings 设置

# 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 是控制是否每页呈现数学方程式。

  • 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 引擎是一个更快的数学渲染引擎,而且没有 JavaScript 它也能生存。

  1. 需要卸载原始渲染器 hexo-renderer
$ npm un hexo-renderer-marked
  1. 如果你使用 KaTeX 渲染数学公式,你需要安装渲染器选中的一个:
$ npm i hexo-renderer-markdown-it-plus # or hexo-renderer-markdown-it
  1. 在主题配置文件中,选择 katex 作为渲染引擎。
math:
  ...
  katex:
    enable: true
  1. 运行标准 Hexo 生成、部署进程或启动服务器:
$ hexo clean && hexo g -d
# or hexo clean && hexo s

Plugins 插件

Next 还集成了一些 MathJax 和 KaTeX 的插件,可以通过设置 CDN url 轻松配置它们。

Mhchem 是 MathJax 的第三方扩展,是一个可以轻松写出漂亮的化学方程式的工具。MathJax/mhchem Manual.

Katex 的 Copy-tex 扩展修改了任何支持剪贴板 API 的浏览器中的复制 / 粘贴行为,这样,当选择和复制整个 KaTeX 渲染的元素时,结果剪贴板的文本内容将呈现 KaTeX 元素作为其 LaTeX 源,并由指定的分隔符包围。 更多信息: Copy-tex extension.

注意:

  1. Displayed Math (i.e. $$...$$)需要以新行开始, 换言之before the opening $$and after the ending $$不能出现任何非空白字符
  2. 不支持 Unicode 编码
  3. Inline Math (..$...$) 不能包含空格 after the opening $ and before the ending $ (comment #32).
  4. Heading中使用 math, 在使用 toc 时候会出现三次, 因此 head 中不建议使用 math
  5. 如果你在你的 post's title 中使用 math,它不会被渲染

Examples 例子

在 MathJax 中对方程进行编号和引用

在 NexT 的新版本中,我们增加了自动等式编号的功能,以便有机会参考该等式。 下面我们将简要描述如何使用这个特性。

一般来说,要使自动方程式编号工作,您必须将 LaTeX 方程式包装在方程式环境中。 使用简单的老式方法(例如,用两个美元符号包装一个方程式)是行不通的。 如何引用一个等式? 只需给出一个 label {}标记,然后在后面的文本中,使用 ref {}或 eqref {}来引用它。 使用 eqref {}是首选的,因为如果您使用 ref {} ,则方程数周围没有括号。 下面是方程式编号的一些常见场景。

简单方程式

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

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

Multi-line Equation 多行方程

对于多行方程,在方程式环境中,您可以使用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 来排列多个方程,每个方程都有自己的数字。

$$\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 彩色字体语法

统一表示方法:\color{颜色}{文本}

# *附 上面那种 - MarkDown 彩色字体语法:
$\color{black}{黑色(\text{black})}$
$\color{red}{红色(\text{red})}$
$\color{blue}{蓝色(\text{blue})}$

$\color{grey}{灰色}$ 
$\color{purple}{紫色}$ 
$\color{olive}{橄榄绿}$ 
$\color{teal}{蓝绿色}$ 
$\color{silver}{银色}$ 
$\color{lime}{浅绿色}$ 
$\color{navy}{藏青色}$

\color{black}{黑色(\text{black})}
\color{red}{红色(\text{red})}
\color{blue}{蓝色(\text{blue})}

\color{grey}{灰色}
\color{purple}{紫色}
\color{olive}{橄榄绿}
\color{teal}{蓝绿色}
\color{silver}{银色}
\color{lime}{浅绿色}
\color{navy}{藏青色}

字体特效设置

$\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}{删除线}

补充:删除线可以多种形式搭配使用

额外:设置字号

\Huge{小初字体(36pts)}
\huge{一号字体(27.5pts)}
\LARGE{二号字体(21pts)}
\Large{三号字体(15.75pts)}
\large{四号字体(13.75pts)}
\normalsize{小四字体(12pts)}
默认字体(12pts)
\small{五号字体(10.5pts)}
\scriptsize{六号字体(7.875pts)}
\tiny{七号字体(5.25pts)}

参考

next 主题官网
https://theme-next.org/

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,245评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,749评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,960评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,575评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,668评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,670评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,664评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,422评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,864评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,178评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,340评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,015评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,646评论 3 323
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,265评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,494评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,261评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,206评论 2 352