saul365/LoveIt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(math): more block delimiter for math and update katex 0.11.1 -> 0.15.3

Browse Source
This commit is contained in:
Dillon
2022-05-05 02:34:17 +08:00
parent 67b05a1e16
commit 264dd5b9d5
76 changed files with 274 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
exampleSite/content/about/index.en.md
View File

@@ -69,7 +69,7 @@ math:
* :(fab fa-font-awesome fa-fw): Extended Markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
* :(far fa-sticky-note fa-fw): Extended Markdown syntax for **ruby annotation**
* :(fas fa-percentage fa-fw): Extended Markdown syntax for **fraction**
* :(fas fa-square-root-alt fa-fw): **Mathematical formula** supported by [$ \KaTeX $](https://katex.org/)
* :(fas fa-square-root-alt fa-fw): **Mathematical formula** supported by [$\KaTeX$](https://katex.org/)
* :(fas fa-project-diagram fa-fw): **Diagrams** shortcode supported by [mermaid](https://github.com/knsv/mermaid)
* :(fas fa-chart-pie fa-fw): **Interactive data visualization** shortcode supported by [ECharts](https://echarts.apache.org/)
* :(fas fa-map-marked-alt fa-fw): **Mapbox** shortcode supported by [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
@@ -106,7 +106,7 @@ Thanks to the authors of following resources included in the theme:
* [clipboard.js](https://github.com/zenorocha/clipboard.js)
* [Sharer.js](https://github.com/ellisonleao/sharer.js)
* [TypeIt](https://typeitjs.com/)
* [$ \KaTeX $](https://katex.org/)
* [$\KaTeX$](https://katex.org/)
* [mermaid](https://github.com/knsv/mermaid)
* [ECharts](https://echarts.apache.org/)
* [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)

4
exampleSite/content/about/index.zh-cn.md
View File

@@ -69,7 +69,7 @@ math:
* :(fab fa-font-awesome fa-fw): 支持 **[Font Awesome](https://fontawesome.com/) 图标**的扩展 Markdown 语法
* :(far fa-sticky-note fa-fw): 支持**上标注释**的扩展 Markdown 语法
* :(fas fa-percentage fa-fw): 支持**分数**的扩展 Markdown 语法
* :(fas fa-square-root-alt fa-fw): 支持基于 [$ \KaTeX $](https://katex.org/) 的**数学公式**
* :(fas fa-square-root-alt fa-fw): 支持基于 [$\KaTeX$](https://katex.org/) 的**数学公式**
* :(fas fa-project-diagram fa-fw): 支持基于 [mermaid](https://github.com/knsv/mermaid) 的**图表** shortcode
* :(fas fa-chart-pie fa-fw): 支持基于 [ECharts](https://echarts.apache.org/) 的**交互式数据可视化** shortcode
* :(fas fa-map-marked-alt fa-fw): 支持基于 [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 的 **Mapbox** shortcode
@@ -106,7 +106,7 @@ LoveIt 主题中用到了以下项目，感谢它们的作者：
* [clipboard.js](https://github.com/zenorocha/clipboard.js)
* [Sharer.js](https://github.com/ellisonleao/sharer.js)
* [TypeIt](https://typeitjs.com/)
* [$ \KaTeX $](https://katex.org/)
* [$\KaTeX$](https://katex.org/)
* [mermaid](https://github.com/knsv/mermaid)
* [ECharts](https://echarts.apache.org/)
* [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)

8
exampleSite/content/posts/theme-documentation-basics/index.en.md
View File

@@ -432,12 +432,12 @@ Please open the code block below to view the complete sample configuration :(far
# {{< version 0.2.0 changed >}} {{< link "https://katex.org/" KaTeX >}} mathematical formulas
[params.page.math]
enable = true
# default block delimiter is $$ ... $$ and \\[ ... \\]
blockLeftDelimiter = ""
blockRightDelimiter = ""
# default inline delimiter is $ ... $ and \\( ... \\)
# default inline delimiter is $ ... $ and \( ... \)
inlineLeftDelimiter = ""
inlineRightDelimiter = ""
# default block delimiter is $$ ... $$, \[ ... \], \begin{equation} ... \end{equation} and some other functions
blockLeftDelimiter = ""
blockRightDelimiter = ""
# KaTeX extension copy_tex
copyTex = true
# KaTeX extension mhchem

8
exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md
View File

@@ -441,12 +441,12 @@ hugo
# {{< version 0.2.0 changed >}} {{< link "https://katex.org/" KaTeX >}} 数学公式
[params.page.math]
enable = true
# 默认块定界符是 $$ ... $$ 和 \\[ ... \\]
blockLeftDelimiter = ""
blockRightDelimiter = ""
# 默认行内定界符是 $ ... $ 和 \\( ... \\)
# 默认行内定界符是 $ ... $ 和 \( ... \)
inlineLeftDelimiter = ""
inlineRightDelimiter = ""
# 默认块定界符是 $$ ... $$, \[ ... \], \begin{equation} ... \end{equation} 和一些其它的函数
blockLeftDelimiter = ""
blockRightDelimiter = ""
# KaTeX 插件 copy_tex
copyTex = true
# KaTeX 插件 mhchem

140
exampleSite/content/posts/theme-documentation-content/index.en.md
View File

@@ -243,60 +243,150 @@ This part is shown in the [emoji support page](../emoji-support/).
### Mathematical Formula
**LoveIt** theme supports mathematical formulas based on [$ \KaTeX $](https://katex.org/).
**LoveIt** theme supports mathematical formulas based on [$\KaTeX$](https://katex.org/).
Set the property `enable = true` under `[params.math]` in your [site configuration](../theme-documentation-basics#site-configuration)
and the property `math: true` of the article front matter to enable the automatic rendering of mathematical formulas.
**$\KaTeX$** automatically renders formulas based on **specific delimiters**.
{{< admonition tip >}}
Here is a list of [$ \TeX $ functions supported by $ \KaTeX $](https://katex.org/docs/supported.html).
Here is a list of [$\TeX$ functions supported by $\KaTeX$](https://katex.org/docs/supported.html).
{{< /admonition >}}
#### Block Formula
{{< admonition >}}
Since Hugo generates HTML documents according to the syntax such as `_`/`*`/`>>` when rendering Markdown documents,
and some text content in the form of escape characters
(such as `\(`/`\)`/`\[`/`\]`/`\\`) escape processing will be performed automatically,
therefore, additional escape character expressions are required for these places to achieve automatic rendering:
The default block delimiters are `$$`/`$$` and `\\[`/`\\]`:
```markdown
$$ c = \pm\sqrt{a^2 + b^2} $$
\\[ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\]
```
The rendered output looks like this:
$$ c = \pm\sqrt{a^2 + b^2} $$
\\[ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\]
* `_` -> `\_`
* `*` -> `\*`
* `>>` -> `\>>`
* `\(` -> `\\(`
* `\)` -> `\\)`
* `\[` -> `\\[`
* `\]` -> `\\]`
* `\\` -> `\\\\`
{{< /admonition >}}
#### Inline Formula
The default inline delimiters are `$`/`$` and `\\(`/`\\)`:
The default inline delimiters are:
```markdown
$ c = \pm\sqrt{a^2 + b^2} $ and \\( f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\)
* `$ ... $`
* `\( ... \)` (escaped: `\\( ... \\)`)
For example:
```tex
$c = \pm\sqrt{a^2 + b^2}$ and \\(f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi\\)
```
The rendered output looks like this:
$ c = \pm\sqrt{a^2 + b^2} $ and \\( f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\)
$c = \pm\sqrt{a^2 + b^2}$ and \\(f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi\\)
#### Block Formula
The default block delimiters are:
* `$$ ... $$`
* `\[ ... \]` (escaped: `\\[ ... \\]`)
* `\begin{equation} ... \end{equation}` (unnumbered: `\begin{equation*} ... \end{equation*}`)
* `\begin{align} ... \end{align}` (unnumbered: `\begin{align*} ... \end{align*}`)
* `\begin{alignat} ... \end{alignat}` (unnumbered: `\begin{alignat*} ... \end{alignat*}`)
* `\begin{gather} ... \end{gather}` (unnumbered: `\begin{gather*} ... \end{gather*}`)
* `\begin{CD} ... \end{CD}`
For example:
```tex
$$ c = \pm\sqrt{a^2 + b^2} $$
\\[ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\]
\begin{equation*}
\rho \frac{\mathrm{D} \mathbf{v}}{\mathrm{D} t}=\nabla \cdot \mathbb{P}+\rho \mathbf{f}
\end{equation*}
\begin{equation}
\mathbf{E}=\sum_{i} \mathbf{E}\_{i}=\mathbf{E}\_{1}+\mathbf{E}\_{2}+\mathbf{E}_{3}+\cdots
\end{equation}
\begin{align}
a&=b+c \\\\
d+e&=f
\end{align}
\begin{alignat}{2}
10&x+&3&y = 2 \\\\
3&x+&13&y = 4
\end{alignat}
\begin{gather}
a=b \\\\
e=b+c
\end{gather}
\begin{CD}
A @>a\>> B \\\\
@VbVV @AAcA \\\\
C @= D
\end{CD}
```
The rendered output looks like this:
$$ c = \pm\sqrt{a^2 + b^2} $$
\\[ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\]
\begin{equation*}
\rho \frac{\mathrm{D} \mathbf{v}}{\mathrm{D} t}=\nabla \cdot \mathbb{P}+\rho \mathbf{f}
\end{equation*}
\begin{equation}
\mathbf{E}=\sum_{i} \mathbf{E}\_{i}=\mathbf{E}\_{1}+\mathbf{E}\_{2}+\mathbf{E}_{3}+\cdots
\end{equation}
\begin{align}
a&=b+c \\\\
d+e&=f
\end{align}
\begin{alignat}{2}
10&x+&3&y = 2 \\\\
3&x+&13&y = 4
\end{alignat}
\begin{gather}
a=b \\\\
e=b+c
\end{gather}
\begin{CD}
A @>a\>> B \\\\
@VbVV @AAcA \\\\
C @= D
\end{CD}
{{< admonition tip >}}
You can add more block and inline delimiters in your [site configuration](../theme-documentation-basics#site-configuration).
You can add more inline and block delimiters in your [site configuration](../theme-documentation-basics#site-configuration).
{{< /admonition >}}
#### Copy-tex
**[Copy-tex](https://github.com/Khan/KaTeX/tree/master/contrib/copy-tex)** is an extension for **$ \KaTeX $**.
**[Copy-tex](https://github.com/Khan/KaTeX/tree/master/contrib/copy-tex)** is an extension for **$\KaTeX$**.
By the extension, when selecting and copying $ \KaTeX $ rendered elements, copies their $ \LaTeX $ source to the clipboard.
By the extension, when selecting and copying $\KaTeX$ rendered elements, copies their $\LaTeX$ source to the clipboard.
Set the property `copyTex = true` under `[params.math]` in your [site configuration](../theme-documentation-basics#site-configuration) to enable Copy-tex.
Select and copy the formula rendered in the previous section, and you can find that the copied content is the LaTeX source code.
Select and copy the formula rendered in the previous section, and you can find that the copied content is the $\LaTeX$ source code.
#### mhchem
**[mhchem](https://github.com/Khan/KaTeX/tree/master/contrib/mhchem)** is an extension for **$ \KaTeX $**.
**[mhchem](https://github.com/Khan/KaTeX/tree/master/contrib/mhchem)** is an extension for **$\KaTeX$**.
By the extension, you can write beautiful chemical equations easily in the article.

139
exampleSite/content/posts/theme-documentation-content/index.zh-cn.md
View File

@@ -242,60 +242,149 @@ resources:
### 数学公式
**LoveIt** 基于 [$ \KaTeX $](https://katex.org/) 提供数学公式的支持.
**LoveIt** 基于 [$\KaTeX$](https://katex.org/) 提供数学公式的支持.
在你的 [网站配置](../theme-documentation-basics#site-configuration) 中的 `[params.math]` 下面设置属性 `enable = true`,
并在文章的前置参数中设置属性 `math: true`来启用数学公式的自动渲染.
**$\KaTeX$** 根据 **特定的分隔符** 来自动渲染公式.
{{< admonition tip >}}
有一份 [$ \KaTeX $ 中支持的 $ \TeX $ 函数](https://katex.org/docs/supported.html) 清单.
有一份 [$\KaTeX$ 中支持的 $\TeX$ 函数](https://katex.org/docs/supported.html) 清单.
{{< /admonition >}}
#### 公式块
{{< admonition >}}
由于 Hugo 在渲染 Markdown 文档时会根据 `_`/`*`/`>>` 之类的语法生成 HTML 文档,
并且有些转义字符形式的文本内容 (如 `\(`/`\)`/`\[`/`\]`/`\\`) 会自动进行转义处理,
因此需要对这些地方进行额外的转义字符表达来实现自动渲染:
默认的公式块分割符是 `$$`/`$$` 和 `\\[`/`\\]`:
```markdown
$$ c = \pm\sqrt{a^2 + b^2} $$
\\[ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\]
```
呈现的输出效果如下:
$$ c = \pm\sqrt{a^2 + b^2} $$
\\[ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\]
* `_` -> `\_`
* `*` -> `\*`
* `>>` -> `\>>`
* `\(` -> `\\(`
* `\)` -> `\\)`
* `\[` -> `\\[`
* `\]` -> `\\]`
* `\\` -> `\\\\`
{{< /admonition >}}
#### 行内公式
默认的行内公式分割符是 `$`/`$` 和 `\\(`/`\\)`:
默认的行内公式分割符有:
```markdown
$ c = \pm\sqrt{a^2 + b^2} $ 和 \\( f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\)
* `$ ... $`
* `\( ... \)` (转义的: `\\( ... \\)`)
例如:
```tex
$c = \pm\sqrt{a^2 + b^2}$ 和 \\(f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi\\)
```
呈现的输出效果如下:
$ c = \pm\sqrt{a^2 + b^2} $ 和 \\( f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\)
$c = \pm\sqrt{a^2 + b^2}$ 和 \\(f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi\\)
#### 公式块
默认的公式块分割符有:
* `$$ ... $$`
* `\[ ... \]` (转义的: `\\[ ... \\]`)
* `\begin{equation} ... \end{equation}` (不编号的: `\begin{equation*} ... \end{equation*}`)
* `\begin{align} ... \end{align}` (不编号的: `\begin{align*} ... \end{align*}`)
* `\begin{alignat} ... \end{alignat}` (不编号的: `\begin{alignat*} ... \end{alignat*}`)
* `\begin{gather} ... \end{gather}` (不编号的: `\begin{gather*} ... \end{gather*}`)
* `\begin{CD} ... \end{CD}`
例如:
```tex
$$ c = \pm\sqrt{a^2 + b^2} $$
\\[ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\]
\begin{equation*}
\rho \frac{\mathrm{D} \mathbf{v}}{\mathrm{D} t}=\nabla \cdot \mathbb{P}+\rho \mathbf{f}
\end{equation*}
\begin{equation}
\mathbf{E}=\sum_{i} \mathbf{E}\_{i}=\mathbf{E}\_{1}+\mathbf{E}\_{2}+\mathbf{E}_{3}+\cdots
\end{equation}
\begin{align}
a&=b+c \\\\
d+e&=f
\end{align}
\begin{alignat}{2}
10&x+&3&y = 2 \\\\
3&x+&13&y = 4
\end{alignat}
\begin{gather}
a=b \\\\
e=b+c
\end{gather}
\begin{CD}
A @>a\>> B \\\\
@VbVV @AAcA \\\\
C @= D
\end{CD}
```
呈现的输出效果如下:
$$ c = \pm\sqrt{a^2 + b^2} $$
\\[ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\]
\begin{equation*}
\rho \frac{\mathrm{D} \mathbf{v}}{\mathrm{D} t}=\nabla \cdot \mathbb{P}+\rho \mathbf{f}
\end{equation*}
\begin{equation}
\mathbf{E}=\sum_{i} \mathbf{E}\_{i}=\mathbf{E}\_{1}+\mathbf{E}\_{2}+\mathbf{E}_{3}+\cdots
\end{equation}
\begin{align}
a&=b+c \\\\
d+e&=f
\end{align}
\begin{alignat}{2}
10&x+&3&y = 2 \\\\
3&x+&13&y = 4
\end{alignat}
\begin{gather}
a=b \\\\
e=b+c
\end{gather}
\begin{CD}
A @>a\>> B \\\\
@VbVV @AAcA \\\\
C @= D
\end{CD}
{{< admonition tip >}}
你可以在 [网站配置](../theme-documentation-basics#site-configuration) 中自定义公式块和行内公式的分割符.
你可以在 [网站配置](../theme-documentation-basics#site-configuration) 中自定义行内公式和公式块的分割符.
{{< /admonition >}}
#### Copy-tex
**[Copy-tex](https://github.com/Khan/KaTeX/tree/master/contrib/copy-tex)** 是一个 **$ \KaTeX $** 的插件.
**[Copy-tex](https://github.com/Khan/KaTeX/tree/master/contrib/copy-tex)** 是一个 **$\KaTeX$** 的插件.
通过这个扩展, 在选择并复制 $ \KaTeX $ 渲染的公式时, 会将其 $ \LaTeX $ 源代码复制到剪贴板.
通过这个扩展, 在选择并复制 $\KaTeX$ 渲染的公式时, 会将其 $\LaTeX$ 源代码复制到剪贴板.
在你的 [网站配置](../theme-documentation-basics#site-configuration) 中的 `[params.math]` 下面设置属性 `copyTex = true` 来启用 Copy-tex.
选择并复制上一节中渲染的公式, 可以发现复制的内容为 LaTeX 源代码.
选择并复制上一节中渲染的公式, 可以发现复制的内容为 $\LaTeX$ 源代码.
#### mhchem
**[mhchem](https://github.com/Khan/KaTeX/tree/master/contrib/mhchem)** 是一个 **$ \KaTeX $** 的插件.
**[mhchem](https://github.com/Khan/KaTeX/tree/master/contrib/mhchem)** 是一个 **$\KaTeX$** 的插件.
通过这个扩展, 你可以在文章中轻松编写漂亮的化学方程式.