💄 Support render math formula by mathjax & katex framework. close #27

This commit is contained in:
凡梦星尘 2022-09-11 11:14:54 +08:00
parent dc66bc1a05
commit c38a439171
11 changed files with 390 additions and 109 deletions

View File

@ -3,7 +3,6 @@
@import 'utterances';
@import 'search';
@import 'related-posts';
@import 'math';
@import 'gitter';
@import 'livere';
@import 'waline';

View File

@ -1,9 +0,0 @@
@if $math_mathjax_enable {
mjx-container[jax='CHTML'][display='true'], .has-jax {
overflow: auto hidden;
}
mjx-container[display='true'] + br {
display: none;
}
}

View File

@ -112,7 +112,6 @@ $reading_progress_position : {{ $P.readingProgress.position }};
$reading_progress_reversed : {{ $P.readingProgress.reversed }};
// Thirdparty
$math_mathjax_enable : {{ $P.math.mathjax.enable }};
// TODO
//$related_posts_enable : {{ $P.relatedPosts.enable }};
$related_posts_enable : false;

View File

@ -82,3 +82,24 @@ instant:
name: instantsearch.js
version: 4.40.5
file: dist/instantsearch.production.min.js
plugins:
mathjax:
js:
- name: mathjax
version: 3.2.0
file: es5/tex-mml-chtml.js
katex:
js:
- name: katex
version: 0.16.0
file: dist/katex.min.js
- name: auto-render
alias: katex
version: 0.16.0
file: dist/contrib/auto-render.min.js
css:
- name: katex
version: 0.16.0
file: dist/katex.min.css

View File

@ -700,27 +700,11 @@ params:
# Third Party Plugins & Services Settings
# ---------------------------------------------------------------
# TODO
# 数学公式渲染支持(暂时未实现)
# Math Formulas Render Support
# Warning: Please install / uninstall the relevant renderer according to the documentation.
# See: https://theme-next.js.org/docs/third-party-services/math-equations
# Server-side plugin: https://github.com/next-theme/hexo-filter-mathjax
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 script EVERY PAGE.
every_page: false
mathjax:
enable: false
# Available values: none | ams | all
tags: none
katex:
enable: false
# See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
copy_tex: false
# 数学公式渲染支持,可选值: mathjax, katex
# 注意这里全局配置,意味着所有页面都会加载数学公式脚本
# Math Formulas Render Support, options: mathjax, katex
# Warning: It's global settings then will load scripts in every page.
#math: mathjax
# TODO
# FancyBox is a tool that offers a nice and elegant way

View File

@ -0,0 +1,227 @@
---
title: "数学公式渲染"
description: "主题支持mathjs和katex两种不同插件的数学公式渲染方案。"
keywords: "math,formula"
date: 2022-09-11T10:16:02+08:00
lastmod: 2022-09-11T10:16:02+08:00
categories:
- 示例
tags:
- 数学公式
- mathjax
- katex
url: "post/math-formula.html"
math: mathjax
---
本主题支持 `mathjax``katex` 两种不的方案支持数学公式的渲染,可根据自已的需求进行选择。
<!--more-->
接下的示例中,将使用 [MathJax](https://www.mathjax.org/) 方案来展示渲染效果。
{{< note info >}}
- 使用 `hugo new` 命令创建一篇新的文章
- 可以全局启用数据公式渲染,请在项目配置参数 `math: katex``math: mathjax`
- 或是将该参数配置到需要显示数学公式的页面头部(减少不必要的加载消耗)
{{< /note >}}
**注意:** 使用[支持的TeX功能](https://docs.mathjax.org/en/latest/input/tex/index.html)的联机参考资料。
### 例子
## 重复的分数
$$
\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} \equiv 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }
$$
## 总和记号
$$
\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
$$
## 几何级数之和
我把接下来的两个例子分成了几行,这样它在手机上表现得更好。这就是为什么它们包含 `\displaystyle`
$$
\displaystyle\sum_{i=1}^{k+1}i
$$
$$
\displaystyle= \left(\sum_{i=1}^{k}i\right) +(k+1)
$$
$$
\displaystyle= \frac{k(k+1)}{2}+k+1
$$
$$
\displaystyle= \frac{k(k+1)+2(k+1)}{2}
$$
$$
\displaystyle= \frac{(k+1)(k+2)}{2}
$$
$$
\displaystyle= \frac{(k+1)((k+1)+1)}{2}
$$
## 乘记号
$$
\displaystyle 1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = \displaystyle \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, \displaystyle\text{ for }\lvert q\rvert < 1.
$$
## 随文数式
这是一些线性数学: $$ k_{n+1} = n^2 + k_n^2 - k_{n-1} $$ 然后是更多的文本。
## 希腊字母
$$
\Gamma\ \Delta\ \Theta\ \Lambda\ \Xi\ \Pi\ \Sigma\ \Upsilon\ \Phi\ \Psi\ \Omega
\alpha\ \beta\ \gamma\ \delta\ \epsilon\ \zeta\ \eta\ \theta\ \iota\ \kappa\ \lambda\ \mu\ \nu\ \xi \ \omicron\ \pi\ \rho\ \sigma\ \tau\ \upsilon\ \phi\ \chi\ \psi\ \omega\ \varepsilon\ \vartheta\ \varpi\ \varrho\ \varsigma\ \varphi
$$
## 箭头
$$
\gets\ \to\ \leftarrow\ \rightarrow\ \uparrow\ \Uparrow\ \downarrow\ \Downarrow\ \updownarrow\ \Updownarrow
$$
$$
\Leftarrow\ \Rightarrow\ \leftrightarrow\ \Leftrightarrow\ \mapsto\ \hookleftarrow
\leftharpoonup\ \leftharpoondown\ \rightleftharpoons\ \longleftarrow\ \Longleftarrow\ \longrightarrow
$$
$$
\Longrightarrow\ \longleftrightarrow\ \Longleftrightarrow\ \longmapsto\ \hookrightarrow\ \rightharpoonup
$$
$$
\rightharpoondown\ \leadsto\ \nearrow\ \searrow\ \swarrow\ \nwarrow
$$
## 符号
$$
\surd\ \barwedge\ \veebar\ \odot\ \oplus\ \otimes\ \oslash\ \circledcirc\ \boxdot\ \bigtriangleup
$$
$$
\bigtriangledown\ \dagger\ \diamond\ \star\ \triangleleft\ \triangleright\ \angle\ \infty\ \prime\ \triangle
$$
## 微积分学
$$
\int u \frac{dv}{dx}\,dx=uv-\int \frac{du}{dx}v\,dx
$$
$$
f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x}
$$
$$
\oint \vec{F} \cdot d\vec{s}=0
$$
## 洛伦茨方程
$$
\begin{aligned} \dot{x} & = \sigma(y-x) \\\\ \dot{y} & = \rho x - y - xz \\\\ \dot{z} & = -\beta z + xy \end{aligned}
$$
## 交叉乘积
这在KaTeX中是可行的但在这种环境中馏分的分离不是很好。
$$
\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\\\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\\\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \end{vmatrix}
$$
这里有一个解决方案:使用“mfrac”类(在MathJax情况下没有区别)的额外类使分数更小:
$$
\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\\\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\\\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \end{vmatrix}
$$
## 强调
$$
\hat{x}\ \vec{x}\ \ddot{x}
$$
## 有弹性的括号
$$
\left(\frac{x^2}{y^3}\right)
$$
## 评估范围
$$
\left.\frac{x^3}{3}\right|_0^1
$$
## 诊断标准
$$
f(n) = \begin{cases} \frac{n}{2}, & \text{if } n\text{ is even} \\\\ 3n+1, & \text{if } n\text{ is odd} \end{cases}
$$
## 麦克斯韦方程组
$$
\begin{aligned} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\\\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\\\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\\\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned}
$$
## 统计学
固定词组:
$$
\frac{n!}{k!(n-k)!} = {^n}C_k
{n \choose k}
$$
## 分数在分数
$$
\frac{\frac{1}{x}+\frac{1}{y}}{y-z}
$$
## n次方根
$$
\sqrt[n]{1+x+x^2+x^3+\ldots}
$$
## 矩阵
$$
\begin{pmatrix} a_{11} & a_{12} & a_{13}\\\\ a_{21} & a_{22} & a_{23}\\\\ a_{31} & a_{32} & a_{33} \end{pmatrix}
\begin{bmatrix} 0 & \cdots & 0 \\\\ \vdots & \ddots & \vdots \\\\ 0 & \cdots & 0 \end{bmatrix}
$$
## 标点符号
$$
f(x) = \sqrt{1+x} \quad (x \ge -1)
f(x) \sim x^2 \quad (x\to\infty)
$$
现在用标点符号:
$$
f(x) = \sqrt{1+x}, \quad x \ge -1
f(x) \sim x^2, \quad x\to\infty
$$

View File

@ -40,7 +40,7 @@
</div>
</footer>
{{- partialCached "scripts.html" . }}
{{- partial "scripts.html" . }}
</body>
</html>

View File

@ -0,0 +1,16 @@
{{/* Use to get resources path with vendor */}}
{{ $fmt := "%s/%s@%s/%s" }}
{{ $npm := .res.name }}
{{ with .res.alias }}
{{ $npm = . }}
{{ end }}
{{ $file := .res.file }}
{{ if eq .vendor "cdnjs" }}
{{ $file = replaceRE `(dist|lib|source\/js)\/` "" .res.file }}
{{ $fmt = "%s/%s/%s/%s" }}
{{ end }}
{{ $pluginRes := printf $fmt .router $npm .res.version $file }}
{{ return $pluginRes }}

View File

@ -1,80 +1,39 @@
<!-- Plugin scripts files -->
{{- $jsRes := .Site.Data.resources.js }}
{{ partialCached "scripts/global.html" . }}
{{- $vendor := .Site.Params.vendors.plugins }}
{{- $router := .Scratch.Get "router" }}
{{ $jsFmt := "%s/%s@%s/%s" }}
{{- range $js := $jsRes }}
{{- $npm := $js.name }}
{{- $file := $js.file }}
{{- if eq $vendor "cdnjs" }}
{{- with $js.alias }}
{{- $npm = . }}
{{- end }}
{{- $file = replaceRE `(dist|lib|source\/js)\/` "" $js.file }}
{{- $jsFmt = "%s/%s/%s/%s" }}
{{- end }}
{{- $pluginJS := printf $jsFmt $router $npm $js.version $file }}
<script type="text/javascript" src="{{ $pluginJS }}" defer></script>
{{- end }}
<script class="next-config" data-name="main" type="application/json">{{- .Scratch.Get "config" -}}</script>
<!-- Load math render scripts -->
{{ $math := .Params.math | default .Site.Params.math }}
{{ if $math }}
{{- partialCached "scripts/plugins.html" (dict "vendor" $vendor "router" $router "res" .Site.Data.resources.plugins "index" $math) }}
{{ if eq $math "katex" }}
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(document.body, {
delimiters: [
{left: '$$', right: '$$', display: true},
{left: '$', right: '$', display: false},
{left: '\\(', right: '\\)', display: false},
{left: '\\[', right: '\\]', display: true}
],
{{- $config := resources.Get "js/config.js" }}
{{- $motion := resources.Get "js/motion.js" }}
{{- $boot := resources.Get "js/next-boot.js" }}
{{- $utils := resources.Get "js/utils.js" }}
{{- $nextjs := (slice $config $utils $boot ) }}
{{- if .Site.Params.motion.enable }}
{{ $motionjs := resources.Get "js/motion.js" }}
{{ $nextjs = $nextjs | append $motionjs }}
{{- end }}
{{- if or (eq .Site.Params.shceme "Muse") (eq .Site.Params.shceme "Mist") }}
{{ $musejs := resources.Get "js/schemes/muse.js" }}
{{ $nextjs = $nextjs | append $musejs }}
{{- end }}
{{- if .Site.Params.bookmark.enable }}
{{- $bookmarkjs := resources.Get "js/bookmark.js" }}
{{- $nextjs = $nextjs | append $bookmarkjs }}
{{- end }}
{{- if .Site.Params.pjax }}
{{- $pjaxjs := resources.Get "js/pjax.js" }}
{{- $nextjs = $nextjs | append $pjaxjs }}
{{- end }}
{{- if isset .Site.Params "addthisid" }}
{{- $addthisjs := resources.Get "js/third-party/share/addthis.js" }}
{{- $nextjs = $nextjs | append $addthisjs }}
{{- end }}
{{- if isset .Site.Params "waline" }}
{{- $walinejs := resources.Get "js/third-party/comments/waline.js" }}
{{- $nextjs = $nextjs | append $walinejs }}
{{- end }}
{{- if isset .Site.Params "giscus" }}
{{- $giscusjs := resources.Get "js/third-party/comments/giscus.js" }}
{{- $nextjs = $nextjs | append $giscusjs }}
{{- end }}
{{- if isset .Site.Params "livere" }}
{{- $liverejs := resources.Get "js/third-party/comments/livere.js" }}
{{- $nextjs = $nextjs | append $liverejs }}
{{- end }}
{{- if isset .Site.Params "artalk" }}
{{- $artalkjs := resources.Get "js/third-party/comments/artalk.js" }}
{{- $nextjs = $nextjs | append $artalkjs }}
{{- end }}
{{- if isset .Site.Params "utterances" }}
{{- $utterancesjs := resources.Get "js/third-party/comments/utterances.js" }}
{{- $nextjs = $nextjs | append $utterancesjs }}
{{- end }}
{{- if .Site.Params.localSearch.enable }}
{{- $search := resources.Get "js/third-party/search/local.js" }}
{{- $nextjs = $nextjs | append $search }}
throwOnError : false
});
});
</script>
{{ end }}
{{- if .Site.Params.algoliaSearch.enable }}
{{- $search := resources.Get "js/third-party/search/algolia.js" }}
{{- $nextjs = $nextjs | append $search }}
{{ if eq $math "mathjax" }}
<script type="text/javascript">
window.MathJax = {
tex: {
inlineMath: [["$", "$"]],
}
};
</script>
{{ end }}
{{- $nextjs = $nextjs | resources.Concat "js/main.js"}}
{{ if hugo.IsProduction }}
{{- $nextjs = $nextjs | minify | fingerprint }}
{{ end }}
<script type="text/javascript" src="{{ $nextjs.RelPermalink }}" defer></script>

View File

@ -0,0 +1,68 @@
{{- $jsRes := .Site.Data.resources.js }}
{{- $vendor := .Site.Params.vendors.plugins }}
{{- $router := .Scratch.Get "router" }}
{{- range $jsRes }}
{{ $pluginJS := partial "_funs/get_res.html" (dict "res" . "vendor" $vendor "router" $router) }}
<script type="text/javascript" src="{{ $pluginJS }}" defer></script>
{{- end }}
<script class="next-config" data-name="main" type="application/json">{{- .Scratch.Get "config" -}}</script>
{{- $config := resources.Get "js/config.js" }}
{{- $motion := resources.Get "js/motion.js" }}
{{- $boot := resources.Get "js/next-boot.js" }}
{{- $utils := resources.Get "js/utils.js" }}
{{- $nextjs := (slice $config $utils $boot ) }}
{{- if .Site.Params.motion.enable }}
{{ $motionjs := resources.Get "js/motion.js" }}
{{ $nextjs = $nextjs | append $motionjs }}
{{- end }}
{{- if or (eq .Site.Params.shceme "Muse") (eq .Site.Params.shceme "Mist") }}
{{ $musejs := resources.Get "js/schemes/muse.js" }}
{{ $nextjs = $nextjs | append $musejs }}
{{- end }}
{{- if .Site.Params.bookmark.enable }}
{{- $bookmarkjs := resources.Get "js/bookmark.js" }}
{{- $nextjs = $nextjs | append $bookmarkjs }}
{{- end }}
{{- if .Site.Params.pjax }}
{{- $pjaxjs := resources.Get "js/pjax.js" }}
{{- $nextjs = $nextjs | append $pjaxjs }}
{{- end }}
{{- if isset .Site.Params "addthisid" }}
{{- $addthisjs := resources.Get "js/third-party/share/addthis.js" }}
{{- $nextjs = $nextjs | append $addthisjs }}
{{- end }}
{{- if isset .Site.Params "waline" }}
{{- $walinejs := resources.Get "js/third-party/comments/waline.js" }}
{{- $nextjs = $nextjs | append $walinejs }}
{{- end }}
{{- if isset .Site.Params "giscus" }}
{{- $giscusjs := resources.Get "js/third-party/comments/giscus.js" }}
{{- $nextjs = $nextjs | append $giscusjs }}
{{- end }}
{{- if isset .Site.Params "livere" }}
{{- $liverejs := resources.Get "js/third-party/comments/livere.js" }}
{{- $nextjs = $nextjs | append $liverejs }}
{{- end }}
{{- if isset .Site.Params "artalk" }}
{{- $artalkjs := resources.Get "js/third-party/comments/artalk.js" }}
{{- $nextjs = $nextjs | append $artalkjs }}
{{- end }}
{{- if isset .Site.Params "utterances" }}
{{- $utterancesjs := resources.Get "js/third-party/comments/utterances.js" }}
{{- $nextjs = $nextjs | append $utterancesjs }}
{{- end }}
{{- if .Site.Params.localSearch.enable }}
{{- $search := resources.Get "js/third-party/search/local.js" }}
{{- $nextjs = $nextjs | append $search }}
{{ end }}
{{- if .Site.Params.algoliaSearch.enable }}
{{- $search := resources.Get "js/third-party/search/algolia.js" }}
{{- $nextjs = $nextjs | append $search }}
{{ end }}
{{- $nextjs = $nextjs | resources.Concat "js/main.js"}}
{{ if hugo.IsProduction }}
{{- $nextjs = $nextjs | minify | fingerprint }}
{{ end }}
<script type="text/javascript" src="{{ $nextjs.RelPermalink }}" defer></script>

View File

@ -0,0 +1,17 @@
{{- $vendor := .vendor }}
{{- $router := .router }}
{{- $res := (index .res .index) }}
{{- $cssRes := $res.css }}
{{ if $cssRes }}
{{ range $cssRes }}
{{ $css := partial "_funs/get_res.html" (dict "res" . "vendor" $vendor "router" $router) }}
<link rel="stylesheet" href="{{ $css }}"/>
{{ end }}
{{ end }}
{{- $jsRes := $res.js }}
{{ range $jsRes }}
{{ $js := partial "_funs/get_res.html" (dict "res" . "vendor" $vendor "router" $router) }}
<script type="text/javascript" src="{{ $js }}"></script>
{{ end }}