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

简介: 由于静态网站的某些功能有限,所以我们需要第三方服务来扩展我们的网站。在任何时候,你都可以使用 NexT 支持的第三方服务来扩展所需的功能。Next 提供了两个渲染引擎来显示数学方程: MathJax 和 KaTeX。要使用这个特性,您只需要选择一个渲染引擎并打开它的 enable(位于heme config file)。 然后你需要安装相应的 Hexo 渲染器来完全支持数学方程式的显示-只开启启用可能不会让你正确地看到显示的方程式。 相应的 Hexo 渲染引擎将提供如下。Settings 设置

由于静态网站的某些功能有限,所以我们需要第三方服务来扩展我们的网站。在任何时候,你都可以使用 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 $$不能出现任何非空白字符


  1. 不支持 Unicode 编码


  1. Inline Math (..$...$) 不能包含空格 after the opening $ and before the ending $ (comment #32).


  1. Heading中使用 math, 在使用 toc 时候会出现三次, 因此 head 中不建议使用 math


  1. 如果你在你的 post's title 中使用 math,它不会被渲染

Examples 例子



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


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


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


简单方程式

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


image.png

Multi-line Equation 多行方程


对于多行方程,在方程式环境中,您可以使用aligned将其分割为多行:

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


image.png


多重对齐方程


我们可以用 align 来排列多个方程,每个方程都有自己的数字。

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


image.png


额外: 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}{藏青色}$


image.png


image.pngimage.png

image.png


字体特效设置



$\bf{加粗}$   
$\underline{下划线}$   
$\enclose{horizontalstrike}{删除线}    $
$\enclose{verticalstrike}{删\\除\\线}  $
$\enclose{updiagonalstrike}{删除线}    $
$\enclose{downdiagonalstrike}{删除线}  $
$\enclose{updiagonalstrike,downdiagonalstrike}{删除线} $
$\enclose{horizontalstrike,verticalstrike}{\;\ 删\\删除线\\\;\ 线}   $
$\enclose{updiagonalstrike,downdiagonalstrike,horizontalstrike,verticalstrike}{删除线}$




image.png


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


额外:设置字号


image.png

参考



next 主题官网


https://theme-next.org/


theme NexT


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


目录
相关文章
|
开发者
冷门但好看的 VSCode 主题推荐
笔者在使用VSCode进行开发的过程中喜欢没事就逛一逛插件商店里的颜色主题,也看过国内外许多论坛上面的颜色主题推荐,不知不觉已经下载了超过一百个的颜色主题。这篇文章总结了我用过的最舒服的一些颜色主题。
6163 0
冷门但好看的 VSCode 主题推荐
|
Python
Markdown 拓展-Docsify 主题美化
docsify-themeable - A delightfully simple theme system for docsify.js https://jhildenbiddle.github.io/docsify-themeable/#/
1288 0
|
1月前
|
前端开发 搜索推荐 C++
Marp 教程:如何在 VSCode 中引入自定义样式和主题
本文介绍了如何在 Marp 中引入自定义样式和主题,使你的幻灯片更加个性化和独特。首先,你需要安装 VSCode 和 Marp 插件,了解 Marp 的基本结构。接着,通过创建自定义 CSS 文件并在 Markdown 文件中引入,实现样式定制。此外,还可以创建和使用自定义主题,以及进行高级自定义,如调整布局、引入自定义字体和定义复杂动画。最后,使用 Marp 的预览功能实时查看效果。
87 0
|
5月前
|
前端开发
typora自定义主题
typora自定义主题
117 2
|
8月前
|
JavaScript
Hexo个人博客之Next-8.20主题下载及美化
Hexo个人博客之Next-8.20主题下载及美化
|
Shell C++ JavaScript
VuePress 数学公式支持
VuePress 数学公式支持
135 2
|
存储 数据可视化 JavaScript
Three.js:打造独一无二的3D模型可视化编辑神器!
因为之前工作过的可视化大屏项目开发3d大屏组件模块需要用到Three.js来完成,其主功能是实现对3d模型的材质,灯光,背景,动画。等属性进行可视化的编辑操作以及模型编辑数据的存储和模型在大屏上面的拖拽显示
884 1
Three.js:打造独一无二的3D模型可视化编辑神器!
|
数据采集 搜索推荐 数据挖掘
Hexo(3)-安装自己喜欢的主题
我们之前使用 Hexo 生成的博客使用的是 Hexo 的默认主题:Landscape。怎么说呢,这个主题猛地一看还行,仔细一看还不如猛地一看,所以我决定另寻归宿。
使用hexo在butterfly主题中开启看板娘配置教程(包括模型展示)
使用hexo在butterfly主题中开启看板娘配置教程(包括模型展示)
199 0