Rewrite Mermaid and KaTeX to be usable both from shorcode and code block, update dependencies

exampleSite/content.en/docs/shortcodes/katex.md

@@ -5,7 +5,21 @@ title: KaTeX
 
 KaTeX shortcode let you render math typesetting in markdown document. See [KaTeX](https://katex.org/)
 
-## Example
+{{% hint info %}}
+**Override KaTeX initialization config**  
+To override the [initialization config](https://katex.org/docs/options.html) for KaTeX,
+create a `katex.json` file in your `assets` folder!
+{{% /hint %}}
+
+# Example
+{{< katex />}}
+
+
+## Activation
+KaTeX is activated on the page by first use of the shortcode or render block. you can force activation with empty `{{</* katex /*/>}}` and use delimiters defined in configuration in `assets/katex.json`.
+
+## Rendering as block
+
 {{% columns %}}
 
 ```latex
@@ -14,18 +28,57 @@ f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
 {{< /katex */>}}
 ```
 
+````latex
+```katex
+f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
+```
+````
+
+````latex
+$$
+f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
+$$
+````
+
 <--->
 
 {{< katex display=true >}}
 f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
 {{< /katex >}}
 
+---
+
+```katex
+f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
+```
+
+---
+
+$$
+f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
+$$
+
 {{% /columns %}}
 
-## Display Mode Example
+## Rendering inline 
+When KaTeX is active on the page it is possible to write inline expressions.  
+
+| Code | Output |
+| --   | --     |
+| `{{</* katex >}}\pi(x){{< /katex */>}}` | {{< katex >}}\pi(x){{< /katex >}} |
+| `\\( \pi(x) \\)` | \\( \pi(x) \\) |
+
+## Configuration
+KaTeX configuration could be adjusted by editing `assets/katex.json` file. For example to enabled inline delimiters `$..$` put content below into the file.
+
+```json
+{
+  "delimiters": [
+    {"left": "$$", "right": "$$", "display": true},
+    {"left": "$", "right": "$", "display": false},
+    {"left": "\\(", "right": "\\)", "display": false},
+    {"left": "\\[", "right": "\\]", "display": true}
+  ]
+}
+```
 
-Here is some inline example: {{< katex >}}\pi(x){{< /katex >}}, rendered in the same line. And below is `display` example, having `display: block`
-{{< katex display=true >}}
-f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
-{{< /katex >}}
-Text continues here.

exampleSite/content.en/docs/shortcodes/mermaid.md

@@ -10,6 +10,35 @@ create a `mermaid.json` file in your `assets` folder!
 
 ## Example
 
+{{% columns %}}
+
+````tpl
+```mermaid
+stateDiagram-v2
+    State1: The state with a note
+    note right of State1
+        Important information! You can write
+        notes.
+    end note
+    State1 --> State2
+    note left of State2 : This is the note to the left.
+```
+````
+
+<--->
+
+```mermaid
+stateDiagram-v2
+    State1: The state with a note
+    note right of State1
+        Important information! You can write
+        notes.
+    end note
+    State1 --> State2
+    note left of State2 : This is the note to the left.
+```
+
+{{% /columns %}}
 
 {{% columns %}}
 
@@ -28,7 +57,7 @@ stateDiagram-v2
 
 <--->
 
-{{<mermaid>}}
+{{< mermaid >}}
 stateDiagram-v2
     State1: The state with a note
     note right of State1
@@ -37,6 +66,129 @@ stateDiagram-v2
     end note
     State1 --> State2
     note left of State2 : This is the note to the left.
-{{</mermaid>}}
+{{< /mermaid >}}
 
 {{% /columns %}}
+
+## Diagrams
+Explore more diagrams and syntax on Mermaid [documentation page](https://mermaid.js.org/syntax/flowchart.html).
+
+{{% columns %}}
+
+```mermaid
+stateDiagram-v2
+    State1: The state with a note
+    note right of State1
+        Important information! You can write
+        notes.
+    end note
+    State1 --> State2
+    note left of State2 : This is the note to the left.
+```
+
+```mermaid
+sequenceDiagram
+    Alice->>John: Hello John, how are you?
+    John-->>Alice: Great!
+    Alice-)John: See you later!
+```
+
+```mermaid
+---
+title: Animal example
+---
+classDiagram
+    note "From Duck till Zebra"
+    Animal <|-- Duck
+    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
+    Animal <|-- Fish
+    Animal <|-- Zebra
+    Animal : +int age
+    Animal : +String gender
+    Animal: +isMammal()
+    Animal: +mate()
+    class Duck{
+        +String beakColor
+        +swim()
+        +quack()
+    }
+    class Fish{
+        -int sizeInFeet
+        -canEat()
+    }
+    class Zebra{
+        +bool is_wild
+        +run()
+    }
+```
+
+```mermaid
+---
+title: Simple sample
+---
+stateDiagram-v2
+    [*] --> Still
+    Still --> [*]
+
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]
+```
+
+<--->
+
+```mermaid
+---
+title: Example Git diagram
+---
+gitGraph
+   commit
+   commit
+   branch develop
+   checkout develop
+   commit
+   commit
+   checkout main
+   merge develop
+   commit
+   commit
+```
+
+```mermaid
+gantt
+    title A Gantt Diagram
+    dateFormat YYYY-MM-DD
+    section Section
+        A task          :a1, 2014-01-01, 30d
+        Another task    :after a1, 20d
+    section Another
+        Task in Another :2014-01-12, 12d
+        another task    :24d
+```
+
+```mermaid
+pie title Pets adopted by volunteers
+    "Dogs" : 386
+    "Cats" : 85
+    "Rats" : 15
+```
+
+```mermaid
+quadrantChart
+    title Reach and engagement of campaigns
+    x-axis Low Reach --> High Reach
+    y-axis Low Engagement --> High Engagement
+    quadrant-1 We should expand
+    quadrant-2 Need to promote
+    quadrant-3 Re-evaluate
+    quadrant-4 May be improved
+    Campaign A: [0.3, 0.6]
+    Campaign B: [0.45, 0.23]
+    Campaign C: [0.57, 0.69]
+    Campaign D: [0.78, 0.34]
+    Campaign E: [0.40, 0.34]
+    Campaign F: [0.35, 0.78]
+```
+
+{{% /columns %}}