clarify caveats for mermaid code fences

This commit is contained in:
Sören Weber 2021-10-07 23:01:04 +02:00
parent a2fa096c3e
commit fdd5ff7ab8
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
3 changed files with 13 additions and 7 deletions

View file

@ -26,7 +26,7 @@ relativeURLs = true
[markup] [markup]
[markup.highlight] [markup.highlight]
style = "base16-snazzy" # choose a color theme or create your own style = "base16-snazzy" # choose a color theme or create your own
guessSyntax = true # avoid unstyled code if no language was given guessSyntax = false # if set to true, avoid unstyled code if no language was given but mermaid code fences will not work anymore
[markup.goldmark.renderer] [markup.goldmark.renderer]
unsafe= true unsafe= true

View file

@ -57,5 +57,5 @@ You can choose a color theme from the [list of supported themes](https://xyproto
[markup] [markup]
[markup.highlight] [markup.highlight]
style = "base16-snazzy" # choose a color theme or create your own style = "base16-snazzy" # choose a color theme or create your own
guessSyntax = true # avoid unstyled code if no language was given guessSyntax = false # if set to true, avoid unstyled code if no language was given but mermaid code fences will not work anymore
```` ````

View file

@ -18,7 +18,7 @@ classDiagram
You can set an optional `align` attribute which defaults to `center`. You can set an optional `align` attribute which defaults to `center`.
If you don't need alignment you can use the alternative syntax using code fences: If you don't need alignment you can use the alternative syntax using code fences if you have turned off `guessSyntax` for the `markup.highlight` setting (see below):
````plaintext ````plaintext
```mermaid ```mermaid
@ -171,7 +171,7 @@ classDiagram
### State ### State
{{< mermaid >}} ````mermaid
stateDiagram-v2 stateDiagram-v2
open: Open Door open: Open Door
closed: Closed Door closed: Closed Door
@ -180,11 +180,11 @@ stateDiagram-v2
closed --> locked: Lock closed --> locked: Lock
locked --> closed: Unlock locked --> closed: Unlock
closed --> open: Open closed --> open: Open
{{< /mermaid >}} ````
{{% expand "Show markup" "true" %}} {{% expand "Show markup" "true" %}}
````go ````go
{{</* mermaid */>}} ```mermaid
stateDiagram-v2 stateDiagram-v2
open: Open Door open: Open Door
closed: Closed Door closed: Closed Door
@ -193,7 +193,7 @@ stateDiagram-v2
closed --> locked: Lock closed --> locked: Lock
locked --> closed: Unlock locked --> closed: Unlock
closed --> open: Open closed --> open: Open
{{</* /mermaid */>}} ```
```` ````
{{% /expand %}} {{% /expand %}}
@ -205,11 +205,17 @@ This JSON object is forwarded into Mermaid's `mermaid.initialize()` function.
See [Mermaid documentation](http://mermaid-js.github.io/mermaid/getting-started/Setup.html#mermaidapi-configuration-defaults) for all allowed settings. See [Mermaid documentation](http://mermaid-js.github.io/mermaid/getting-started/Setup.html#mermaidapi-configuration-defaults) for all allowed settings.
Also, if you want to use mermaid codefences, you have to turn off `guessSyntax` for the `markup.highlight` setting.
### Example ### Example
````toml ````toml
[params] [params]
mermaidInitialize = "{ \"theme\": \"dark\" }" mermaidInitialize = "{ \"theme\": \"dark\" }"
[markup]
[markup.highlight]
guessSyntax = false # if set to true, avoid unstyled code if no language was given but mermaid code fences will not work anymore
```` ````
or pages frontmatter or pages frontmatter