diff --git a/exampleSite/content/shortcodes/expand.en.md b/exampleSite/content/shortcodes/expand.en.md index 89366274dd..74f3828aa5 100644 --- a/exampleSite/content/shortcodes/expand.en.md +++ b/exampleSite/content/shortcodes/expand.en.md @@ -21,23 +21,13 @@ The second optional parameter controls if the block is initially shown as expand ### All defaults {{% expand %}} -Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod -tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, -quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo -consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse -cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non -proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +Yes, you did it! {{% /expand %}} -{{% expand "Show markup" %}} +{{% expand "Show markup" "true" %}} ```` {{%/* expand */%}} -Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod -tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, -quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo -consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse -cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non -proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +Yes, you did it! {{%/* /expand */%}} ```` {{% /expand %}} @@ -45,23 +35,13 @@ proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ### Initially expanded {{% expand "Expand me..." "true" %}} -Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod -tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, -quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo -consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse -cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non -proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +No need to press you! {{% /expand %}} -{{% expand "Show markup" %}} +{{% expand "Show markup" "true" %}} ```` {{%/* expand "Expand me..." "true" */%}} -Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod -tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, -quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo -consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse -cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non -proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +No need to press you! {{%/* /expand */%}} ```` {{% /expand %}} @@ -75,7 +55,7 @@ You can add: - multiple paragraphs - bullet point lists -- *emphasized*, **bold** and even ***bold emphasized*** text +- _emphasized_, **bold** and even **_bold emphasized_** text - [links](https://example.com) - other shortcodes besides `expand` - etc. @@ -85,7 +65,7 @@ You can add: ``` > the possiblities are endless -{{% /expand%}} +{{% /expand %}} {{% expand "Show markup" %}} ```` @@ -96,7 +76,7 @@ You can add: - multiple paragraphs - bullet point lists -- *emphasized*, **bold** and even ***bold emphasized*** text +- _emphasized_, **bold** and even **_bold emphasized_** text - [links](https://example.com) - other shortcodes besides `expand` - etc. diff --git a/exampleSite/content/shortcodes/mermaid.en.md b/exampleSite/content/shortcodes/mermaid.en.md index 05509659f7..09ac30ef9b 100644 --- a/exampleSite/content/shortcodes/mermaid.en.md +++ b/exampleSite/content/shortcodes/mermaid.en.md @@ -1,3 +1,4 @@ + --- title : "Mermaid" description : "Generation of diagram and flowchart from text in a similar manner as markdown" @@ -5,71 +6,57 @@ description : "Generation of diagram and flowchart from text in a similar manner [Mermaid](https://mermaidjs.github.io/) is a library helping you to generate diagram and flowcharts from text, in a similar manner as Markdown. -Just insert your mermaid code in the `mermaid` shortcode and that's it. +## Usage -You can pan and zoom the generated graphs. +Just insert your mermaid code in the `mermaid` shortcode like this: + +```` +{{}} +classDiagram + Person *-- Dog +{{}} +```` + +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: + +````plaintext +```mermaid +classDiagram + Person *-- Dog +``` +```` + +The generated graphs can be be panned by dragging them and zoomed by using the mousewheel. On mobile devices you can use finger gestures. ## Examples -### Flowchart example +### Flowchart - {{}} - graph LR; - A[Hard edge] -->|Link text| B(Round edge) - B --> C{Decision} - C -->|One| D[Result one] - C -->|Two| E[Result two] - {{}} - -renders as - -{{}} +{{< mermaid align="left" >}} graph LR; A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two] -{{}} +{{< /mermaid >}} -or you can use this alternative syntax: - - ```mermaid - graph LR; - A[Hard edge] -->|Link text| B(Round edge) - B --> C{Decision} - C -->|One| D[Result one] - C -->|Two| E[Result two] - ``` - -renders as - -```mermaid +{{% expand "Show markup" "true" %}} +```` +{{}} graph LR; A[Hard edge] -->|Link text| B(Round edge) - B --> C{Decision} + B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two] -``` +{{}} +```` +{{% /expand %}} -## Sequence example +### Sequence - {{}} - sequenceDiagram - participant Alice - participant Bob - Alice->>John: Hello John, how are you? - loop Healthcheck - John->John: Fight against hypochondria - end - Note right of John: Rational thoughts
prevail... - John-->Alice: Great! - John->Bob: How about you? - Bob-->John: Jolly good! - {{}} - -renders as - -{{}} +{{< mermaid >}} sequenceDiagram participant Alice participant Bob @@ -81,31 +68,29 @@ sequenceDiagram John-->Alice: Great! John->Bob: How about you? Bob-->John: Jolly good! -{{}} +{{< /mermaid >}} -### GANTT Example +{{% expand "Show markup" "true" %}} +```` +{{}} +sequenceDiagram + participant Alice + participant Bob + Alice->>John: Hello John, how are you? + loop Healthcheck + John->John: Fight against hypochondria + end + Note right of John: Rational thoughts
prevail... + John-->Alice: Great! + John->Bob: How about you? + Bob-->John: Jolly good! +{{}} +```` +{{% /expand %}} - {{}} - gantt - dateFormat YYYY-MM-DD - title Adding GANTT diagram functionality to mermaid - section A section - Completed task :done, des1, 2014-01-06,2014-01-08 - Active task :active, des2, 2014-01-09, 3d - Future task : des3, after des2, 5d - Future task2 : des4, after des3, 5d - section Critical tasks - Completed task in the critical line :crit, done, 2014-01-06,24h - Implement parser and jison :crit, done, after des1, 2d - Create tests for parser :crit, active, 3d - Future task in critical line :crit, 5d - Create tests for renderer :2d - Add to mermaid :1d - {{}} +### GANTT -renders as - -{{}} +{{< mermaid >}} gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid @@ -113,7 +98,7 @@ gantt Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d - Future task2 : des4, after des3, 5d + Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d @@ -121,30 +106,33 @@ gantt Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d -{{}} +{{< /mermaid >}} -### Class example +{{% expand "Show markup" "true" %}} +```` +{{}} +gantt + dateFormat YYYY-MM-DD + title Adding GANTT diagram functionality to mermaid + section A section + Completed task :done, des1, 2014-01-06,2014-01-08 + Active task :active, des2, 2014-01-09, 3d + Future task : des3, after des2, 5d + Future task2 : des4, after des3, 5d + section Critical tasks + Completed task in the critical line :crit, done, 2014-01-06,24h + Implement parser and jison :crit, done, after des1, 2d + Create tests for parser :crit, active, 3d + Future task in critical line :crit, 5d + Create tests for renderer :2d + Add to mermaid :1d +{{}} +```` +{{% /expand %}} - {{}} - classDiagram - Class01 <|-- AveryLongClass : Cool - Class03 *-- Class04 - Class05 o-- Class06 - Class07 .. Class08 - Class09 --> C2 : Where am i? - Class09 --* C3 - Class09 --|> Class07 - Class07 : equals() - Class07 : Object[] elementData - Class01 : size() - Class01 : int chimp - Class01 : int gorilla - Class08 <--> C2: Cool label - {{}} +### Class -renders as - -{{}} +{{< mermaid >}} classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 @@ -159,24 +147,32 @@ classDiagram Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label -{{}} +{{< /mermaid >}} -### State Diagrams +{{% expand "Show markup" "true" %}} +```` +{{}} +classDiagram + Class01 <|-- AveryLongClass : Cool + Class03 *-- Class04 + Class05 o-- Class06 + Class07 .. Class08 + Class09 --> C2 : Where am i? + Class09 --* C3 + Class09 --|> Class07 + Class07 : equals() + Class07 : Object[] elementData + Class01 : size() + Class01 : int chimp + Class01 : int gorilla + Class08 <--> C2: Cool label +{{}} +```` +{{% /expand %}} - {{}} - stateDiagram-v2 - open: Open Door - closed: Closed Door - locked: Locked Door - open --> closed: Close - closed --> locked: Lock - locked --> closed: Unlock - closed --> open: Open - {{}} +### State -renders as - -{{}} +{{< mermaid >}} stateDiagram-v2 open: Open Door closed: Closed Door @@ -185,7 +181,22 @@ stateDiagram-v2 closed --> locked: Lock locked --> closed: Unlock closed --> open: Open -{{}} +{{< /mermaid >}} + +{{% expand "Show markup" "true" %}} +```` +{{}} +stateDiagram-v2 + open: Open Door + closed: Closed Door + locked: Locked Door + open --> closed: Close + closed --> locked: Lock + locked --> closed: Unlock + closed --> open: Open +{{}} +```` +{{% /expand %}} ## Configuration diff --git a/exampleSite/content/shortcodes/notice.en.md b/exampleSite/content/shortcodes/notice.en.md index 14fb456578..1d96cf3cfd 100644 --- a/exampleSite/content/shortcodes/notice.en.md +++ b/exampleSite/content/shortcodes/notice.en.md @@ -23,7 +23,7 @@ You can add: - multiple paragraphs - bullet point lists -- *emphasized*, **bold** and even ***bold emphasized*** text +- _emphasized_, **bold** and even ***bold emphasized*** text - [links](https://example.com) - other shortcodes besides `notice` - etc. @@ -44,7 +44,7 @@ You can add: - multiple paragraphs - bullet point lists -- *emphasized*, **bold** and even ***bold emphasized*** text +- _emphasized_, **bold** and even ***bold emphasized*** text - [links](https://example.com) - other shortcodes besides `notice` - etc. @@ -67,7 +67,7 @@ You can add: - multiple paragraphs - bullet point lists -- *emphasized*, **bold** and even ***bold emphasized*** text +- _emphasized_, **bold** and even ***bold emphasized*** text - [links](https://example.com) - other shortcodes besides `notice` - etc. @@ -88,7 +88,7 @@ You can add: - multiple paragraphs - bullet point lists -- *emphasized*, **bold** and even ***bold emphasized*** text +- _emphasized_, **bold** and even ***bold emphasized*** text - [links](https://example.com) - other shortcodes besides `notice` - etc. @@ -111,7 +111,7 @@ You can add: - multiple paragraphs - bullet point lists -- *emphasized*, **bold** and even ***bold emphasized*** text +- _emphasized_, **bold** and even ***bold emphasized*** text - [links](https://example.com) - other shortcodes besides `notice` - etc. @@ -132,7 +132,7 @@ You can add: - multiple paragraphs - bullet point lists -- *emphasized*, **bold** and even ***bold emphasized*** text +- _emphasized_, **bold** and even ***bold emphasized*** text - [links](https://example.com) - other shortcodes besides `notice` - etc. @@ -155,7 +155,7 @@ You can add: - multiple paragraphs - bullet point lists -- *emphasized*, **bold** and even ***bold emphasized*** text +- _emphasized_, **bold** and even ***bold emphasized*** text - [links](https://example.com) - other shortcodes besides `notice` - etc. @@ -176,7 +176,7 @@ You can add: - multiple paragraphs - bullet point lists -- *emphasized*, **bold** and even ***bold emphasized*** text +- _emphasized_, **bold** and even ***bold emphasized*** text - [links](https://example.com) - other shortcodes besides `notice` - etc.