前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Hexo NexT 主题对数学公式的支持

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

作者头像
acc8226
发布于 2022-05-17 08:51:23
发布于 2022-05-17 08:51:23
2.3K00
代码可运行
举报
文章被收录于专栏:叽叽西叽叽西
运行总次数:0
代码可运行

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

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

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

Settings 设置

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
# 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 的文章
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!-- This post will render the Math Equations -->
---
title: Will Render Math
mathjax: true
---
....
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!-- This post will NOT render the Math Equations -->
---
title: Not Render Math
mathjax: false
---
....
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!-- 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).

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$ npm un hexo-renderer-marked
$ npm i hexo-renderer-pandoc

In theme config file, choose mathjax as render engine.

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
math:
  ...
  mathjax:
    enable: true

KaTeX 引擎(暂不推荐)

目前在NexT 主题中 KaTeX 还不完善, 暂时不建议使用.

与 MathJax 相比,KaTeX 引擎是一个更快的数学渲染引擎,而且没有 JavaScript 它也能生存。

  1. 需要卸载原始渲染器 hexo-renderer
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$ npm un hexo-renderer-marked
  1. 如果你使用 KaTeX 渲染数学公式,你需要安装渲染器选中的一个:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$ npm i hexo-renderer-markdown-it-plus # or hexo-renderer-markdown-it
  1. 在主题配置文件中,选择 katex 作为渲染引擎。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
math:
  ...
  katex:
    enable: true
  1. 运行标准 Hexo 生成、部署进程或启动服务器:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$ 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 {} ,则方程数周围没有括号。 下面是方程式编号的一些常见场景。

简单方程式

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$$\begin{equation}
e=mc^2
\end{equation}$$

Multi-line Equation 多行方程

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$$\begin{equation}
\begin{aligned}
a &= b + c \\
  &= d + e + f + g \\
  &= h + i
\end{aligned}
\end{equation}$$

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$$\begin{align}
a &= b + c \label{eq3} \\
x &= yz \label{eq4}\\
l &= m - n \label{eq5}
\end{align}$$

额外: MarkDown 彩色字体语法

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
# *附 上面那种 - 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}{藏青色}$

字体特效设置

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$\bf{加粗}$   
$\underline{下划线}$   
$\enclose{horizontalstrike}{删除线}    $
$\enclose{verticalstrike}{删\\除\\线}  $
$\enclose{updiagonalstrike}{删除线}    $
$\enclose{downdiagonalstrike}{删除线}  $
$\enclose{updiagonalstrike,downdiagonalstrike}{删除线} $
$\enclose{horizontalstrike,verticalstrike}{\;\ 删\\删除线\\\;\ 线}   $
$\enclose{updiagonalstrike,downdiagonalstrike,horizontalstrike,verticalstrike}{删除线}$

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

额外:设置字号

参考

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-05-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
年年双十一,年年抢不到,自制Python淘宝秒杀抢购脚本,百分百中[通俗易懂]
首先我的思路很简单,就是让“程序”帮我们自动打开浏览器,进入淘宝,然后到购物车等待抢购时间,自动购买并支付。
全栈程序员站长
2022/08/11
1.8K0
年年双十一,年年抢不到,自制Python淘宝秒杀抢购脚本,百分百中[通俗易懂]
淘宝抢购Python脚本
第一步:把想要抢购的商品加进购物车,注意:脚本是对购物车内全部商品进行下单操作,所以不够买的商品最好先从购物车内删除。 第二步:写好Python脚本,在抢购之前运行,并设置好抢购时间。
全栈程序员站长
2022/08/11
2K0
淘宝抢购Python脚本
自动化淘宝秒杀:Selenium WebDriver实战指南
电商促销季,淘宝等平台的秒杀活动总是让人心动不已。然而,面对众多竞争者,手动秒杀的成功率几乎可以忽略不计。本文将带你深入了解如何使用Selenium WebDriver自动化淘宝秒杀操作,大幅提升你的抢购成功率。
LucianaiB
2024/11/26
3350
自动化淘宝秒杀:Selenium WebDriver实战指南
年年双十一,年年抢不到,自制Python淘宝秒杀抢购脚本,百分百中
首先我的思路很简单,就是让“程序”帮我们自动打开浏览器,进入淘宝,然后到购物车等待抢购时间,自动购买并支付。
用户8544541
2022/01/27
1.9K0
年年双十一,年年抢不到,自制Python淘宝秒杀抢购脚本,百分百中
python抢淘宝的东西-Python 实现毫秒级淘宝抢购脚本的示例代码
本篇文章主要介绍了Python 通过selenium实现毫秒级自动抢购的示例代码,通过扫码登录即可自动完成一系列操作,抢购时间精确至毫秒,可抢加购物车等待时间结算的,也可以抢聚划算的商品。
全栈程序员站长
2022/06/29
9880
python 制作淘宝秒杀脚本
因为我这里是Python3环境,自带的又pip,所以安装selenium直接使用pip安装
全栈程序员站长
2022/08/23
1K0
python 制作淘宝秒杀脚本
使用selenium自动秒抢淘宝商品(附详细入门指南)
selenium是一款web自动化测试工具,可以很方便地模拟真实用户对浏览器进行操作,它支持各种主流浏览器:IE、Chrome、Firefox、Safari、Opera等。
派大星的数据屋
2022/04/03
2.8K0
使用selenium自动秒抢淘宝商品(附详细入门指南)
女朋友跟你说晚安之后仍然在线,我用Python制作脚本成功征服
辣条的一个朋友最近跟我诉苦:女朋友沉迷淘宝抢购无法自拔,大晚上不睡觉都在定时抢购,真是败家。
润森
2022/08/18
3180
女朋友跟你说晚安之后仍然在线,我用Python制作脚本成功征服
淘宝自动抢购脚本「建议收藏」
需要安装python环境,安装python环境可参考链接 安装python完后记得配置环境和安装Pycharm编辑器(安装Pycharm可参考)
全栈程序员站长
2022/08/12
5.3K0
淘宝自动抢购脚本「建议收藏」
Python自动抢购脚本,学废了双十一双十二帮女票抢购心爱的礼物,隔壁女孩都馋哭了。
第一步:需要把想要的商品加进购物车( 此脚本是对购物车内全部商品进行下单操作,所以不够买的商品最好先从购物车内删除。)
江一铭
2022/09/21
2.2K0
Python自动抢购脚本,学废了双十一双十二帮女票抢购心爱的礼物,隔壁女孩都馋哭了。
【淘宝】python的淘宝秒杀抢购下单源码参考
疫情如期,隔离还在继续,何时工作是一个头大的问题,最近在看口罩,不少电商平台都有放出口罩,当然,手残党将会也会是一直难以下手,你可能很难抢得到,故找了几个关于python的淘宝秒杀抢购下单源码参考,当然本渣渣测试下单成功,但是准点抢购还是没有成功。
二爷
2020/07/22
4.3K0
【淘宝】python的淘宝秒杀抢购下单源码参考
「不求人」我用Python抢到了人生的第一单
但若想使用Selenium成功调用Chrome浏览器完成相应的操作,我们还需要一个媒介与浏览器对接。小明本次使用的是Chrome浏览器,因此就需要通过ChromeDriver来驱动。
程序员小明
2020/06/24
2.9K0
小猿圈Python之实现京东秒杀功能技
现在电商盛起,活动页面一个接着一个,一般都是抢购、秒杀,看着很刺激吧,这篇文章小编就揭开这些秒杀功能的面纱,带你们看看实际的面貌,让我们学习一下代码吧。
py3study
2020/01/06
1.8K0
python编写淘宝秒杀脚本
Omnibug是一个插件,可以简化web度量实现的开发。检查每个传出请求(由浏览器发送)的模式;如果出现匹配,URL将显示在开发人员工具面板中,并进行解码以显示请求的详细信息。
全栈程序员站长
2022/06/27
1.4K0
python编写淘宝秒杀脚本
淘宝“秒杀”脚本
说是秒杀脚本,但其实根本做不到毫秒级(看很多文章写毫秒级也是跪了)。自己在mac上实测,大约10s左右会收到邮件。用selenium秒杀是不要想了,用作自动提交订单,还算ok。
全栈程序员站长
2022/09/06
2.1K0
淘宝“秒杀”脚本
python基于selenium+cv2
 I.打开pycharm,点击Settings,找到Project Interpreter,点击右边的下拉菜单下的show All...选项
py3study
2020/01/19
7220
应对双11,我帮她写了一个自动下单脚本
本文主要介绍一种定时自动下单的技术实现。脚本为女神而写,希望双十一能帮到她享受更高的优惠,进而看到她的笑容。
后端技术探索
2019/07/19
14.1K0
python+selenium小米商城红米K40手机抢购!
下载地址:http://chromedriver.storage.proxy.ustclug.org/index.html
全栈程序员站长
2022/11/16
7850
python滑动验证码_python编程是啥
程序功能:程序模仿登入京东主页,自动输入帐号和密码,完成滑块验证,最后领取每日签京豆
全栈程序员站长
2022/09/27
4640
网络爬虫 | selenium 爬取动态加载信息
使用selenium实现动态渲染页面的爬取。selenium是浏览器自动测试框架,模拟浏览器,驱动浏览器执行特定的动作,并可获取浏览器当前呈现的页面的源代码,可见即可爬。该工具支持IE浏览器、Mozilla Firefox及Google Chrome等。
数据STUDIO
2021/06/24
1.3K0
推荐阅读
相关推荐
年年双十一,年年抢不到,自制Python淘宝秒杀抢购脚本,百分百中[通俗易懂]
更多 >
LV.9
北京动视元科技有限公司研发工程师
目录
  • Settings 设置
  • Render Engines 渲染引擎
    • MathJax 引擎(推荐)
    • KaTeX 引擎(暂不推荐)
  • Plugins 插件
  • Examples 例子
    • 在 MathJax 中对方程进行编号和引用
    • 简单方程式
    • Multi-line Equation 多行方程
  • 额外: MarkDown 彩色字体语法
  • 字体特效设置
  • 额外:设置字号
  • 参考
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档