feat: mathematical and chemical content inside code blocks

config/_default/hugo.yml

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

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

@@ -43,3 +43,44 @@ Chemical equations:
 \]
 
 **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 -}}