From 0020bb23f485ae1f8e6b927e1e9de2daa7488c8c Mon Sep 17 00:00:00 2001 From: Andreas Deininger Date: Fri, 21 Oct 2022 14:13:40 +0200 Subject: [PATCH] Auto-activation of mermaid diagrams: adapt documentation --- .../diagrams-and-formulae/index.md | 58 ++++++------------- 1 file changed, 18 insertions(+), 40 deletions(-) diff --git a/userguide/content/en/docs/adding-content/diagrams-and-formulae/index.md b/userguide/content/en/docs/adding-content/diagrams-and-formulae/index.md index 94d81b5c5d..b7d895de88 100644 --- a/userguide/content/en/docs/adding-content/diagrams-and-formulae/index.md +++ b/userguide/content/en/docs/adding-content/diagrams-and-formulae/index.md @@ -269,27 +269,33 @@ For example, the following defines a simple flowchart: ```` ```mermaid -graph LR - Start --> Need{"Do I need diagrams"} - Need -- No --> Off["Set params.mermaid.enable = false"] - Need -- Yes --> HaveFun["Great! Enjoy!"] +graph TD + Start --> Need{"Hugo version >= 0.93.0"} + Need -- No --> Off["Set params.mermaid.enable = true"] + Off --> Author + Need -- Yes --> Author[Insert mermaid codeblock] ``` ```` Automatically renders to: ```mermaid -graph LR - Start --> Need{"Do I need diagrams"} - Need -- No --> Off["Set params.mermaid.enable = false"] - Need -- Yes --> HaveFun["Great! Enjoy!"] - +graph TD + Start --> Need{"Hugo version >= 0.93.0"} + Need -- No --> Off["Set params.mermaid.enable = true"] + Off --> Author + Need -- Yes --> Author[Insert mermaid codeblock] ``` -To enable/disable Mermaid, update `config.toml`/`config.yaml`/`config.json`: +With hugo version 0.93 or higher, support of Mermaid diagrams is automatically enabled as soon as you use a `mermaid` code block on your page. + +{{% alert title="Warning" color="warning" %}} +If you are using hugo version 0.92 or lower, you need to enable Mermaid manually by updating your `config.toml`/`config.yaml`/`config.json`: + +{{% /alert %}} {{< tabpane persistLang=false >}} -{{< tab header="Configuration file:" disabled=true />}} +{{< tab header="Hugo version <= 0.92 only:" disabled=true />}} {{< tab header="config.toml" lang="toml" >}} [params.mermaid] enable = true @@ -310,38 +316,12 @@ params: {{< /tab >}} {{< /tabpane >}} -You also need to disable the `guessSyntax` from markup highlighting in `config.toml`/`config.yaml`/`config.json` for Mermaid to work: - -{{< tabpane persistLang=false >}} -{{< tab header="Configuration file:" disabled=true />}} -{{< tab header="config.toml" lang="toml" >}} -[markup] - [markup.highlight] - guessSyntax = false -{{< /tab >}} -{{< tab header="config.yaml" lang="yaml" >}} -markup: - highlight: - guessSyntax: false -{{< /tab >}} -{{< tab header="config.json" lang="json" >}} -{ - "markup": { - "highlight": { - "guessSyntax": false - } - } -} -{{< /tab >}} -{{< /tabpane >}} - -You can also update settings for Mermaid, such as themes, padding, etc: +If needed, you can define custom settings for your diagrams, such as themes, padding in your `config.toml`/`config.yaml`/`config.json`. {{< tabpane persistLang=false >}} {{< tab header="Configuration file:" disabled=true />}} {{< tab header="config.toml" lang="toml" >}} [params.mermaid] -enable = true theme = "neutral" [params.mermaid.flowchart] @@ -350,7 +330,6 @@ diagramPadding = 6 {{< tab header="config.yaml" lang="yaml" >}} params: mermaid: - enable: true theme: neutral flowchart: diagramPadding: 6 @@ -359,7 +338,6 @@ params: { "params": { "mermaid": { - "enable": true, "theme": "neutral", "flowchart": { "diagramPadding": 6