Reformat tabbed panes

Author: chalin

.vscode/cspell.json

@@ -6,6 +6,8 @@
     "anchorize",
     "Docsy",
     "errorf",
+    "Gantt",
+    "GLFM",
     "htmltest",
     "hugo",
     "isset",

docsy.dev/content/en/docs/content/diagrams-and-formulae/index.md

@@ -2,6 +2,7 @@
 title: Diagrams and Formulae
 weight: 11
 description: Add generated diagrams and scientific formulae to your site.
+cSpell:ignore: goldmark linenos mhchem
 ---
 
 Docsy has built-in support for a number of diagram creation and typesetting
@@ -94,43 +95,44 @@ additional
 have to be created by adding the lines below to your
 `hugo.toml`/`hugo.yaml`/`hugo.json` configuration file:
 
-<!-- prettier-ignore-start -->
-{{< tabpane >}}
+{{< tabpane text=true persist=lang >}}
 {{< tab header="Site configuration file:" disabled=true />}}
-{{< tab header="hugo.toml" lang="toml" >}}
+{{% tab header="hugo.toml" lang="toml" %}}
+
+```toml
 [mediaTypes]
   [mediaTypes.'font/woff']
     suffixes = ['woff']
   [mediaTypes.'font/woff2']
     suffixes = ['woff2']
-{{< /tab >}}
-{{< tab header="hugo.yaml" lang="yaml" >}}
+```
+
+{{% /tab %}} {{% tab header="hugo.yaml" lang="yaml" %}}
+
+```yaml
 mediaTypes:
   font/woff:
-    suffixes:
-    - woff
+    suffixes: [woff]
   font/woff2:
-    suffixes:
-    - woff2
-{{< /tab >}}
-{{< tab header="hugo.json" lang="json" >}}
+    suffixes: [woff2]
+```
+
+{{% /tab %}} {{% tab header="hugo.json" lang="json" %}}
+
+```json
 {
-   "mediaTypes": {
-      "font/woff": {
-         "suffixes": [
-            "woff"
-         ]
-      },
-     "font/woff2": {
-         "suffixes": [
-            "woff2"
-         ]
-      }
-   }
+  "mediaTypes": {
+    "font/woff": {
+      "suffixes": ["woff"]
+    },
+    "font/woff2": {
+      "suffixes": ["woff2"]
+    }
+  }
 }
-{{< /tab >}}
-{{< /tabpane >}}
-<!-- prettier-ignore-end -->
+```
+
+{{% /tab %}} {{< /tabpane >}}
 
 #### Enable `passthrough` extension
 
@@ -139,10 +141,11 @@ inside your `hugo.toml`/`hugo.yaml`/`hugo.json`. You can edit this definition to
 meet your own needs. For details, see the official
 [Hugo docs](https://gohugo.io/content-management/mathematics/#step-1).
 
-<!-- prettier-ignore-start -->
-{{< tabpane >}}
+{{< tabpane text=true persist=lang >}}
 {{< tab header="Site configuration file:" disabled=true />}}
-{{< tab header="hugo.toml" lang="toml" >}}
+{{% tab header="hugo.toml" lang="toml" %}}
+
+```toml
 [markup]
   [markup.goldmark]
     [markup.goldmark.extensions]
@@ -151,8 +154,11 @@ meet your own needs. For details, see the official
         [markup.goldmark.extensions.passthrough.delimiters]
           block = [['\[', '\]'], ['$$', '$$']]
           inline = [['\(', '\)']]
-{{< /tab >}}
-{{< tab header="hugo.yaml" lang="yaml" >}}
+```
+
+{{% /tab %}} {{% tab header="hugo.yaml" lang="yaml" %}}
+
+```yaml
 markup:
   goldmark:
     extensions:
@@ -161,40 +167,32 @@ markup:
         delimiters:
           block: [['\[', '\]'], ['$$', '$$']]
           inline: [['\(', '\)']]
-{{< /tab >}}
-{{< tab header="hugo.json" lang="json" >}}
+```
+
+{{% /tab %}} {{% tab header="hugo.json" lang="json" %}}
+
+```json
 {
-   "markup": {
-      "goldmark": {
-         "extensions": {
-            "passthrough": {
-               "delimiters": {
-                  "block": [
-                     [
-                        "\\[",
-                        "\\]"
-                     ],
-                     [
-                        "$$",
-                        "$$"
-                     ]
-                  ],
-                  "inline": [
-                     [
-                        "\\(",
-                        "\\)"
-                     ]
-                  ]
-               },
-               "enable": true
-            }
-         }
+  "markup": {
+    "goldmark": {
+      "extensions": {
+        "passthrough": {
+          "delimiters": {
+            "block": [
+              ["\\[", "\\]"],
+              ["$$", "$$"]
+            ],
+            "inline": [["\\(", "\\)"]]
+          },
+          "enable": true
+        }
       }
-   }
+    }
+  }
 }
-{{< /tab >}}
-{{< /tabpane >}}
-<!-- prettier-ignore-end -->
+```
+
+{{% /tab %}} {{< /tabpane >}}
 
 #### Add `passthrough` render hook
 
@@ -235,6 +233,7 @@ _Precipitation of barium sulfate:_ \(\ce{SO4^2- + Ba^2+ -> BaSO4 v}\)
 More complex equations can be displayed on their own line using the block
 delimiters defined:
 
+<!-- cSpell:ignore tetrahydroxozincate mchem -->
 <!-- prettier-ignore-start -->
 ````markdown
 \[
@@ -261,7 +260,7 @@ Both standard syntax and `chem` block renders to the same equation:
 <!-- prettier-ignore-end -->
 
 {{% alert title="Note" %}} The
-[manual](https://mhchem.github.io/MathJax-mhchem/) for mchem’s input syntax
+[manual](https://mhchem.github.io/MathJax-mhchem/) for mchem's input syntax
 provides in-depth information about typesetting chemical formulae and physical
 units using the `mhchem` tool. {{% /alert %}}
 
@@ -304,6 +303,8 @@ diagram - no more hunting for the original tools and version to make a new edit.
 
 For example, the following defines a sequence diagram:
 
+<!-- cSpell:ignore autonumber -->
+
 ````
 ```mermaid
 sequenceDiagram

docsy.dev/content/en/site/changelog.md

@@ -73,11 +73,6 @@ See [semver].
 - [Active TOC entry tracking][0.13.0-blog-toc] using Bootstrap ScrollSpy
   ([#2366]).
 - [Section sidebar root][0.13.0-blog-sidebar] feature ([#2364]).
-- **Server side rendering of mathematical formulae**: we now use Hugo's embedded
-  KaTeX engine for rendering mathematical formulae and chemical equations. The
-  engine is auto-activated as soon as mathematical formulae or chemical
-  equations are encountered. There is no need to activate or configure KaTeX any
-  more.
 
 **Other changes**:
 
@@ -91,6 +86,8 @@ See [semver].
 - Dependency updates: Bootstrap 5.3.8, Hugo 0.152.2, Node LTS ≥24.
 - Updated translations: added Occitan locale ([#2173]) and refreshed Simplified
   Chinese ([#2313]) and Ukrainian ([#2331]).
+- **Server-side rendering of mathematical formulae**: now using Hugo's embedded
+  KaTeX engine. For details, see [LaTeX support with KaTeX][diagrams-formulae].
 
 **Experimental**:
 
@@ -124,6 +121,8 @@ See [semver].
 [0.13.0-blog-accessibility]: /blog/2025/0.13.0/#accessibility
 [0.13.0-blog-fouc]: /blog/2025/0.13.0/#accessibility
 [0.13.0-blog-breaking]: /blog/2025/0.13.0/#breaking-changes
+[diagrams-formulae]:
+  /docs/content/diagrams-and-formulae/#latex-support-with-katex
 [How to pick colors with good color-contrast]:
   /docs/content/lookandfeel/#pick-good-color-contrast
 

docsy.dev/hugo.yaml

@@ -162,10 +162,7 @@ module:
 
 mediaTypes:
   font/woff:
-    suffixes:
-    - woff
+    suffixes: [woff]
   font/woff2:
-    suffixes:
-    - woff2
-
+    suffixes: [woff2]
 # cSpell:ignore docsy github goldmark markmap plantuml readingtime

package.json

@@ -1,6 +1,6 @@
 {
   "name": "docsy",
-  "version": "0.13.0-dev+68-g26a0c57",
+  "version": "0.13.0-dev+69-gee89baf",
   "repository": "github:google/docsy",
   "homepage": "https://www.docsy.dev",
   "license": "Apache-2.0",