feat: mathematical and chemical content inside code blocks

Author: deining

.github/workflows/update-resources.yml

@@ -17,7 +17,7 @@ jobs:
         uses: peaceiris/actions-hugo@v3
         with:
           extended: true
-          hugo-version: 0.147.5
+          hugo-version: 0.147.8
       - name: setup node
         uses: actions/setup-node@v4
         with:

config/_default/hugo.yml

@@ -0,0 +1,7 @@
+mediaTypes:
+  font/woff:
+    suffixes:
+    - woff
+  font/woff2:
+    suffixes:
+    - woff2

exampleSite/content/english/post/math-typesetting.md

@@ -39,7 +39,48 @@ $$
 Chemical equations:
 
 \[
-\tag\*{(2)} \ce{Zn^2+ <=>[+ 2OH-][+ 2H+] $\underset{\text{amphoteric hydroxide}}{\ce{Zn(OH)2 v}}$ <=>[+ 2OH-][+ 2H+] $\underset{\text{tetrahydroxozincate}}{\ce{[Zn(OH)4]^2-}}$}
+\tag*{(2)} \ce{Zn^2+ <=>[+ 2OH-][+ 2H+] $\underset{\text{amphoteric hydroxide}}{\ce{Zn(OH)2 v}}$ <=>[+ 2OH-][+ 2H+] $\underset{\text{tetrahydroxozincate}}{\ce{[Zn(OH)4]^2-}}$}
 \]
 
 **Note:** Use the online reference of [Supported TeX Functions](https://katex.org/docs/supported.html)
+
+### Mathematical formulae inside code blocks
+
+As an alternative to the standard syntax used above, formulae can also be
+authored using a
+[GLFM math block](https://docs.gitlab.com/ee/user/markdown.html#math):
+
+````markdown
+The probability of getting \(k\) heads when flipping \(n\) coins is:
+
+```math
+\tag*{(1)} P(E) = {n \choose k} p^k (1-p)^{n-k}
+```
+````
+
+This `math` block renders to:
+
+The probability of getting \(k\) heads when flipping \(n\) coins is:
+
+```math
+\tag*{(1)}  P(E) = {n \choose k} p^k (1-p)^{n-k}
+```
+
+### Chemical equations inside code blocks
+
+You can use a code block adorned with `chem` in order to render
+a chemical equation:
+
+````markdown
+```chem
+\tag*{(2)} \ce{Hg^2+ ->[I-]  $\underset{\mathrm{red}}{\ce{HgI2}}$  ->[I-]  $\underset{\mathrm{red}}{\ce{[Hg^{II}I4]^2-}$}
+```
+````
+
+This `chem` block renders to:
+
+<!-- prettier-ignore-start -->
+```chem
+\tag*{(2)} \ce{Hg^2+ ->[I-]  $\underset{\mathrm{red}}{\ce{HgI2}}$  ->[I-]  $\underset{\mathrm{red}}{\ce{[Hg^{II}I4]^2-}}$}
+```
+<!-- prettier-ignore-end -->

layouts/_default/_markup/render-codeblock-chem.html

@@ -0,0 +1 @@
+{{ partial "math.html" . -}}

layouts/_default/_markup/render-codeblock-math.html

@@ -0,0 +1 @@
+{{ partial "math.html" . -}}

layouts/partials/head.html

@@ -235,21 +235,6 @@
   <!-- KaTeX-->
   {{ $noop := .WordCount }}
   {{ if .Page.Store.Get "hasMath" }}
-    {{ $katex_css_url := printf "https://cdn.jsdelivr.net/npm/katex@latest/dist/katex%s.css" (cond hugo.IsProduction ".min" "") -}}
-    {{ with try (resources.GetRemote $katex_css_url) -}}
-      {{ with .Err -}}
-        {{ errorf "Could not retrieve KaTeX css file from CDN. Reason: %s." . -}}
-      {{ else with.Value -}}
-        {{ with resources.Copy (printf "css/katex%s.css" (cond hugo.IsProduction ".min" "")) . }}
-          {{ $secureCSS := . | resources.Fingerprint "sha512" -}}
-          <link
-            rel="stylesheet"
-            href="{{- .RelPermalink -}}"
-            integrity="{{- $secureCSS.Data.Integrity -}}"
-            crossorigin="anonymous"
-          />
-        {{ end -}}
-      {{ end -}}
-    {{ end -}}
+    {{ partial "katex.html" . }}
   {{ end }}
 </head>

layouts/partials/katex.html

@@ -0,0 +1,48 @@
+{{/* stylesheet */ -}}
+
+{{ $cssFile := cond hugo.IsProduction "katex.min.css" "katex.css" -}}
+{{ $cssUrl := printf "https://unpkg.com/katex@latest/dist/%s" $cssFile -}}
+{{ with try (resources.GetRemote $cssUrl) -}}
+  {{ with .Err -}}
+    {{ errorf "Could not retrieve KaTeX css file from CDN. Reason: %s." . -}}
+  {{ else with .Value -}}
+    {{ with resources.Copy (printf "css/%s" $cssFile) . -}}
+      {{ $cssHash := . | fingerprint "sha512" -}}
+      <link
+        rel="stylesheet"
+        href="{{- .RelPermalink -}}"
+        integrity="{{- $cssHash.Data.Integrity -}}"
+        crossorigin="anonymous">
+    {{ end -}}
+  {{ end -}}
+{{ end -}}
+
+{{/* font files */ -}}
+
+{{ $fontFiles := slice -}}
+{{ $data := dict -}}
+{{ $url := "https://unpkg.com/katex@latest/dist/fonts?meta" -}}
+{{ with try (resources.GetRemote $url) -}}
+  {{ with .Err -}}
+    {{ errorf "%s" . -}}
+  {{ else with ( .Value | unmarshal ) -}}
+      {{ range .files -}}
+        {{ $fontFiles = $fontFiles | append .path -}}
+      {{ end -}}
+  {{ else -}}
+    {{ errorf "Unable to get remote resource %q" $url -}}
+  {{ end -}}
+{{ end -}}
+
+{{ range $fontFile := $fontFiles -}}
+  {{ $fontUrl := (printf "https://unpkg.com/katex@latest%s" $fontFile) -}}
+  {{ with try (resources.GetRemote $fontUrl) -}}
+    {{ with .Err -}}
+      {{ errorf "Could not retrieve KaTeX font file from CDN. Reason: %s." . -}}
+    {{ else with .Value -}}
+      {{ with resources.Copy (printf "css/fonts/%s" (replace $fontFile "/dist/fonts/" "")) . -}}
+        {{ .Publish -}}
+      {{ end -}}
+    {{ end -}}
+  {{ end -}}
+{{ end -}}

layouts/partials/math.html

@@ -0,0 +1,9 @@
+{{ $opts := dict "output" "htmlAndMathml" "displayMode" (not (eq ($.Type) "inline")) -}}
+{{ with try (transform.ToMath .Inner $opts) -}}
+  {{ with .Err -}}
+    {{ errorf "Unable to render mathematical markup to HTML using the transform.ToMath function. The KaTeX display engine threw the following error: %s." . $.Position -}}
+  {{ else -}}
+    {{ .Value -}}
+    {{ $.Page.Store.Set "hasMath" true -}}
+  {{ end -}}
+{{ end -}}

netlify.toml

@@ -10,10 +10,10 @@
   """
 
 [build.environment]
-  HUGO_VERSION = "0.147.5"
-  DART_SASS_VERSION = "1.89.0"
+  HUGO_VERSION = "0.147.8"
+  DART_SASS_VERSION = "1.89.1"
   NODE_VERSION = "24"
-  GO_VERSION = "1.24.3"
+  GO_VERSION = "1.24.4"
   HUGO_ENV = "production"
   HUGO_THEME = "repo"
   HUGO_BASEURL = "https://anatole-demo.netlify.app"