blogs/hugo
1
0
Fork 0
mirror of https://github.com/gohugoio/hugo.git synced 2026-08-24 23:38:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

content: Change KaTeX version references to 0.16.23

Browse Source
This commit is contained in:
Joe Mooring
2025-10-07 08:11:52 -07:00
committed by GitHub
parent ba8c5fd3b5
commit 27fd350a6a
4 changed files with 24 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
content/en/content-management/mathematics.md
+20 -15
View File
@@ -10,7 +10,7 @@ keywords: []
## Overview
Mathematical equations and expressions written in [LaTeX] are common in academic and scientific publications. Your browser typically renders this mathematical markup using an open-source JavaScript display engine such as [MathJax] or [KaTeX].
Mathematical equations and expressions written in [LaTeX][] are common in academic and scientific publications. Your browser typically renders this mathematical markup using an open-source JavaScript display engine such as [MathJax][] or [KaTeX][].
For example, with this LaTeX markup:
@@ -37,7 +37,7 @@ Equations and expressions can be displayed inline with other text, or as standal
Whether an equation or expression appears inline, or as a block, depends on the delimiters that surround the mathematical markup. Delimiters are defined in pairs, where each pair consists of an opening and closing delimiter. The opening and closing delimiters may be the same, or different.
> [!note]
> You can configure Hugo to render mathematical markup on the client side using the MathJax or KaTeX display engine, or you can render the markup with the [`transform.ToMath`] function while building your site.
> You can configure Hugo to render mathematical markup on the client side using the MathJax or KaTeX display engine, or you can render the markup with the [`transform.ToMath`][] function while building your site.
>
> The first approach is described below.
@@ -46,7 +46,7 @@ Whether an equation or expression appears inline, or as a block, depends on the
Follow these instructions to include mathematical equations and expressions in your Markdown using LaTeX markup.
Step 1
: Enable and configure the Goldmark [passthrough extension] in your site configuration. The passthrough extension preserves raw Markdown within delimited snippets of text, including the delimiters themselves.
: Enable and configure the Goldmark [passthrough extension][] in your site configuration. The passthrough extension preserves raw Markdown within delimited snippets of text, including the delimiters themselves.
{{< code-toggle file=hugo copy=true >}}
[markup.goldmark.extensions.passthrough]
@@ -60,12 +60,12 @@ Step 1
math = true
{{< /code-toggle >}}
The configuration above enables mathematical rendering on every page unless you set the `math` parameter to `false` in front matter. To enable mathematical rendering as needed, set the `math` parameter to `false` in your site configuration, and set the `math` parameter to `true` in front matter. Use this parameter in your base template as shown in [Step 3](#step-3).
The configuration above enables mathematical rendering on every page unless you set the `math` parameter to `false` in front matter. To enable mathematical rendering as needed, set the `math` parameter to `false` in your site configuration, and set the `math` parameter to `true` in front matter. Use this parameter in your base template as shown in [Step 3][].
> [!note]
> The configuration above precludes the use of the `$...$` delimiter pair for inline equations. Although you can add this delimiter pair to the configuration and JavaScript, you must double-escape the `$` symbol when used outside of math contexts to avoid unintended formatting.
>
> See the [inline delimiters](#inline-delimiters) section for details.
> See the [inline delimiters][] section for details.
To disable passthrough of inline snippets, omit the `inline` key from the configuration:
@@ -74,7 +74,7 @@ Step 1
block = [['\[', '\]'], ['$$', '$$']]
{{< /code-toggle >}}
You can define your own opening and closing delimiters, provided they match the delimiters that you set in [Step 2].
You can define your own opening and closing delimiters, provided they match the delimiters that you set in [Step 2][].
{{< code-toggle file=hugo >}}
[markup.goldmark.extensions.passthrough.delimiters]
@@ -83,7 +83,7 @@ Step 1
{{< /code-toggle >}}
Step 2
: Create a _partial_ template to load MathJax or KaTeX. The example below loads MathJax, or you can use KaTeX as described in the [engines](#engines) section.
: Create a _partial_ template to load MathJax or KaTeX. The example below loads MathJax, or you can use KaTeX as described in the [engines][] section.
```go-html-template {file="layouts/_partials/math.html" copy=true}
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js"></script>
@@ -166,35 +166,35 @@ I will give you \\$2 if you can solve $y = x^2$.
```
> [!note]
> If you use the `$...$` delimiter pair for inline equations, and occasionally use the&nbsp;`$`&nbsp;symbol outside of math contexts, you must use MathJax instead of KaTeX to avoid unintended formatting caused by [this KaTeX limitation](https://github.com/KaTeX/KaTeX/issues/437).
> If you use the `$...$` delimiter pair for inline equations, and occasionally use the&nbsp;`$`&nbsp;symbol outside of math contexts, you must use MathJax instead of KaTeX to avoid unintended formatting caused by [this KaTeX limitation][].
## Engines
MathJax and KaTeX are open-source JavaScript display engines.
> [!note]
> If you use the `$...$` delimiter pair for inline equations, and occasionally use the&nbsp;`$`&nbsp;symbol outside of math contexts, you must use MathJax instead of KaTeX to avoid unintended formatting caused by [this KaTeX limitation](https://github.com/KaTeX/KaTeX/issues/437).
> If you use the `$...$` delimiter pair for inline equations, and occasionally use the&nbsp;`$`&nbsp;symbol outside of math contexts, you must use MathJax instead of KaTeX to avoid unintended formatting caused by [this KaTeX limitation][].
>
>See the [inline delimiters](#inline-delimiters) section for details.
>See the [inline delimiters][] section for details.
To use KaTeX instead of MathJax, replace the _partial_ template from [Step 2] with this:
To use KaTeX instead of MathJax, replace the _partial_ template from [Step 2][] with this:
```go-html-template {file="layouts/_partials/math.html" copy=true}
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css"
href="https://cdn.jsdelivr.net/npm/katex@0.16.23/dist/katex.min.css"
integrity="sha384-zh0CIslj+VczCZtlzBcjt5ppRcsAmDnRem7ESsYwWwg3m/OaJ2l4x7YBZl9Kxxib"
crossorigin="anonymous"
>
<script
defer
src="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.js"
src="https://cdn.jsdelivr.net/npm/katex@0.16.23/dist/katex.min.js"
integrity="sha384-Rma6DA2IPUwhNxmrB/7S3Tno0YY7sFu9WSYMCuulLhIqYSGZ2gKCJWIqhBWqMQfh"
crossorigin="anonymous">
</script>
<script
defer
src="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/contrib/auto-render.min.js"
src="https://cdn.jsdelivr.net/npm/katex@0.16.23/dist/contrib/auto-render.min.js"
integrity="sha384-hCXGrW6PitJEwbkoStFjeJxv+fSOOQKOPbJxSfM6G5sWZjAyWhXiTIIAmQqnlLlh"
crossorigin="anonymous"
onload="renderMathInElement(document.body);">
@@ -225,10 +225,15 @@ $$C_p[\ce{H2O(l)}] = \pu{75.3 J // mol K}$$
$$C_p[\ce{H2O(l)}] = \pu{75.3 J // mol K}$$
As shown in [Step 2](#step-2) above, MathJax supports chemical equations without additional configuration. To add chemistry support to KaTeX, enable the mhchem extension as described in the KaTeX [documentation](https://katex.org/docs/libs).
As shown in [Step 2][] above, MathJax supports chemical equations without additional configuration. To add chemistry support to KaTeX, enable the mhchem extension as described in the KaTeX [documentation](https://katex.org/docs/libs).
[`transform.ToMath`]: /functions/transform/tomath/
[engines]: #engines
[inline delimiters]: #inline-delimiters
[KaTeX]: https://katex.org/
[LaTeX]: https://www.latex-project.org/
[MathJax]: https://www.mathjax.org/
[passthrough extension]: /configuration/markup/#passthrough
[Step 2]: #step-2
[Step 3]: #step-3
[this KaTeX limitation]: https://github.com/KaTeX/KaTeX/issues/437
content/en/functions/transform/ToMath.md
+2 -2
View File
@@ -63,7 +63,7 @@ output
With `html` and `htmlAndMathml` you must include the KaTeX style sheet within the `head` element of your base template.
```html
<link href="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/katex@0.16.23/dist/katex.min.css" rel="stylesheet">
strict
: {{< new-in 0.147.6 />}}
@@ -132,7 +132,7 @@ Step 3
<head>
{{ $noop := .WordCount }}
{{ if .Page.Store.Get "hasMath" }}
<link href="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/katex@0.16.23/dist/katex.min.css" rel="stylesheet">
{{ end }}
</head>
```
content/en/render-hooks/passthrough.md
+1 -1
View File
@@ -104,7 +104,7 @@ Then, in your base template, conditionally include the KaTeX CSS within the head
<head>
{{ $noop := .WordCount }}
{{ if .Page.Store.Get "hasMath" }}
<link href="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/katex@0.16.23/dist/katex.min.css" rel="stylesheet">
{{ end }}
</head>
```
layouts/baseof.html
+1 -1
View File
@@ -27,7 +27,7 @@
{{ $noop := .WordCount }}
{{ if .Page.Store.Get "hasMath" }}
<link
href="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css"
href="https://cdn.jsdelivr.net/npm/katex@0.16.23/dist/katex.min.css"
rel="stylesheet">
{{ end }}
{{ partial "layouts/head/head.html" . }}