Cap'n Hugo uses Marrrkdown as its rrrambl'n format. However, there be a lot o' th'ns that Marrrkdown doesn’t support well.
Ye could use pure HTML t' expand yer possibilities. But this happens t' be a bad idea. Everyone uses Marrrkdown because it’s pure an' simple t' read. Ye should avoid HTML t' keep it as simple an' port'ble as poss'ble.
T' avoid Markdown’s limitat'ns, Cap'n Hugo created shorrrtcodes. A shortcode be a simple snippet inside o' a plank.
Th' Relearrrn theme provides many shorrrtcodes on top o' Hugo’s exist'n ones.
Th' badge shortcode displays little markers 'n yer text wit' adjust'ble color, title an' ay'con.
ImportantVersion6.6.6Captain AhoiNewAwesome
Usage
{{%badge%}}Important{{%/badge%}}{{%badgestyle="primary"title="Version"%}}6.6.6{{%/badge%}}{{%badgestyle="red"ay'con="angle-double-up"%}}Captain{{%/badge%}}{{%badgestyle="info"%}}New{{%/badge%}}{{%badgecolor="fuchsia"ay'con="fa-fw fab fa-hackerrank"%}}Awesome{{%/badge%}}
Th' CSS color value t' be used. If not set, th' chosen color depends on th' style. Any given value will overwrite th' default.
- fer severity styles: a nice match'n color fer th' severity - fer all other styles: th' correspond'n color
title
see notes
Arbitrary text fer th' badge title. Depend'n on th' style there may be a default title. Any given value will overwrite th' default.
- fer severity styles: th' match'n title fer th' severity - fer all other styles: <empty>
If ye want no title fer a severity style, ye have t' set this parameter t' " " (a non empty str'n filled wit' spaces)
ay'con
see notes
Font Awesome ay'con name set t' th' left o' th' title. Depend'n on th' style there may be a default ay'con. Any given value will overwrite th' default.
- fer severity styles: a nice match'n ay'con fer th' severity - fer all other styles: <empty>
If ye want no ay'con fer a severity style, ye have t' set this parameter t' " " (a non empty str'n filled wit' spaces)
Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Awesome Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.
Button
Th' button shortcode displays a click'ble button wit' adjust'ble color, title an' ay'con.
Either th' destinat'n URL fer th' button or JavaScript code t' be executed on click. If this parameter be not set, th' button will do noth'n but be still displayed as click'ble.
- if start'n wit' javascript: all follow'n text will be executed 'n yer browser - every other str'n will be interpreted as URL
style
transparent
Th' style scheme used fer th' button.
- by severity: caut'n, important, info, note, tip, warning - by brand color: primary, secondary, accent - by color: blue, cyan, green, grey, magenta, orange, red - by special color: default, transparent, code
Th' CSS color value t' be used. If not set, th' chosen color depends on th' style. Any given value will overwrite th' default.
- fer severity styles: a nice match'n color fer th' severity - fer all other styles: th' correspond'n color
ay'con
see notes
Font Awesome ay'con name set t' th' left o' th' title. Depend'n on th' style there may be a default ay'con. Any given value will overwrite th' default.
- fer severity styles: a nice match'n ay'con fer th' severity - fer all other styles: <empty>
If ye want no ay'con fer a severity style, ye have t' set this parameter t' " " (a non empty str'n filled wit' spaces)
iconposit'n
left
Places th' ay'con t' th' left or right o' th' title.
target
see notes
Th' destinat'n frame/window if href be an URL. Otherwise th' parameter be not used. This behaves similar t' normal links. If th' parameter be not given it defaults t':
- th' sett'n o' externalLinkTarget or _blank if not set, fer any address start'n wit' http:// or https:// - no specific value fer all other links
type
see notes
Th' button type if href be JavaScript. Otherwise th' parameter be not used. If th' parameter be not given it defaults t' button
<content>
see notes
Arbitrary text fer th' button title. Depend'n on th' style there may be a default title. Any given value will overwrite th' default.
- fer severity styles: th' match'n title fer th' severity - fer all other styles: <empty>
If ye want no title fer a severity style, ye have t' set this parameter t' " " (a non empty str'n filled wit' spaces)
Choose th' style used t' group all children. It could be any HTML tag name.
style
li
Choose th' style used t' display each descendant. It could be any HTML tag name.
showhidden
false
When true, child planks hidden from th' menu will be displayed as well.
descript'n
false
When true shows a short text under each plank 'n th' list. When no descript'n or summary exists fer th' plank, th' first 70 words o' th' rrrambl'n be taken - read more info about summaries on gohugo.io.
depth
1
Th' depth o' descendants t' display. For example, if th' value be 2, th' shortcode will display two levels o' child planks. T' get all descendants, set this value t' a high number eg. 999.
sort
auto
Th' sort criteria o' th' displayed list.
- auto defaults t' ordersectionsby o' th' page’s Front Matter or t' ordersectionsby o' th' configurat'n Opt'n or t' weight - weight - title - linktitle - modifieddate - expirydate - publishdate - date - length - default adher'n t' Hugo’s default sort criteria
{{%expandtitle="Show me almost **endless** possibilities"%}}Yecanaddstandardmarkdownrules:-multipleparagraphs-bulletpointlists-_emphasized_,**bold**an'even**_boldemphasized_**text-[links](https://example.com)
-etc.```plaintext
...and even source code
```>th'possibilitiesbeendless(almost-includ'nothershorrrtcodesmayormaynotwork){{%/expand%}}
This shortcode be fully compat'ble wit' Hugo’s highlight shortcode but offers some extensions.
It be called interchangeably 'n th' same way as Hugo’s own shortcode by provid'n positional parameter or simply by us'n Marrrkdown codefences.
Ye be free t' also call this shortcode from yer own partials. In this case it resembles Hugo’s highlight funct'n rules if ye call it us'n compatibility rules.
Codefence rules be widely avail'ble 'n other Marrrkdown parsers like GitHub an' therefore be th' recommend rules fer generat'n port'ble Marrrkdown.
Th' tab shortcode be also cap'ble o' display'n code but wit' limited opt'ns.
Parameter
Name
Posit'n
Default
Notes
type
1
<empty>
Th' language o' th' code t' highlight. Choose from one o' th' supported languages. Case-insensitive.
title
<empty>
Extension. Arbitrary title fer code. This displays th' code like a single tab if hl_inline=false (which be Hugo’s default).
wrap
see notes
Extension. When true th' rrrambl'n may wrap on long lines otherwise it will be scroll'ble.
Th' default value can be set 'n yer hugo.toml an' overwritten via front matter. See below.
opt'ns
2
<empty>
An optional, comma-separated list o' zero or more Cap'n Hugo supported opt'ns as well as extension parameter from this t'ble.
Ye can configure th' color style used fer code blocks 'n yer color variants stylesheet file us'n th' --CODE-theme vari'ble. This requires further configurat'n as described 'n th' above link.
Examples
Line Numbers wit' Start'n Offset
As mentioned above, line numbers 'n a t'ble layout will shift if code be wrapp'n, so better use inline. T' make th'ns easier fer ye, set lineNumbersInT'ble = false 'n yer hugo.toml an' add lineNos = true when call'n th' shortcode instead o' th' specific values t'ble or inline.
666# th' hardest part be t' start writ'n code; here's a kickstart; just copy an' paste this; it's free; th' next lines will cost ye serious credits667print("Hello")668print(" ")669print("World")670print("!")
Marrrkdown Codefence wit' Title
```py { title="python" }
# a bit shorter
print("Hello World!")
```
Font Awesome ay'con name t' be displayed. It will be displayed 'n th' text color o' its accord'n context.
Find'n an ay'con
Browse through th' avail'ble ay'cons 'n th' Font Awesome Gallery. Notice that th' free filter be enabled, as only th' free ay'cons be avail'ble by default.
Once on th' Font Awesome plank fer a specific ay'con, fer example th' plank fer th' heart, copy th' ay'con name an' paste into th' Marrrkdown rrrambl'n.
Customis'n Ay'cons
Font Awesome provides many ways t' modify th' ay'con
Change color (by default th' ay'con will inherit th' parent color)
Builtwit'{{%ay'conheart%}}byRelearrrnan'Cap'n Hugo
Built wit' by Relearrrn an' Cap'n Hugo
Advanced HTML Usage
While th' shortcode simplifies us'n standard ay'cons, th' ay'con customizat'n an' other advanced features o' th' Font Awesome library require ye t' use HTML directly. Paste th' <i> HTML into marrrkup, an' Font Awesome will board th' relevant ay'con.
Built wit' <iclass="fas fa-heart"></i> by Relearrrn an' Cap'n Hugo
Built wit' by Relearrrn an' Cap'n Hugo
T' use these native HTML elements 'n yer Marrrkdown, add this 'n yer hugo.toml:
[marrrkup.goldmark.renderer]unsafe=true
Include
Th' include shortcode includes other planks, resources or files from yer project.
When true an' th' included file contains head'ns, th' first head'n will be hidden. This comes 'n handy, eg. if ye include otherwise standalone Marrrkdown files.
Sett'ns
Enabl'n Link Warn'ns
Opt'nFront Matter Ye can use include.errorlevel t' control what should happen if a local link can not be resolved t' a resource.
If not set or empty, any unresolved link be written as given into th' result'n output. If set t' warning th' same happens an' an additional warning be printed 'n th' built console. If set t' error an error message be printed an' th' build be aborted.
Please note that this can not resolve files inside o' yer static directory. Th' file must be a resource o' th' plank or th' ship.
th' possibilities be endless (almost - includ'n other shorrrtcodes may or may not work) (almost - includ'n other shorrrtcodes may or may not work)
Et Cetera (English: /ɛtˈsɛtərə/), abbreviated t' etc., etc, et cet., be a Latin expression that be used 'n English t' mean “and other similar things”, or “and so forth” ↩︎
Math
If this be not enough, th' math shortcode helps ye render'n math an' chemical formulae us'n th' MathJax library.
Ye can also use pure Marrrkdown fer writ'n simple math expressions.
Passthrough rules be only avail'ble by further configurat'n an' has limited features as it does not provide any o' th' below parameter. Nevertheless, it be widely avail'ble 'n other Marrrkdown parsers like GitHub an' therefore be th' recommend rules fer generat'n port'ble Marrrkdown.
Parameter
Name
Default
Notes
align
center
Th' vertical alignment.
Allowed values be left, center or right.
<content>
<empty>
Yer formulae.
Sett'ns
Provid'n Initializat'n Opt'ns fer th' MathJax Library
Opt'nFront Matter Th' MathJax library be configured wit' default sett'ns fer initializat'n.
Ye can overwrite th' sett'ns by provid'n a JSON object 'n mathJaxInitialize. See MathJax’s documentat'n fer all allowed sett'ns.
Keep 'n mind that initializat'n sett'ns o' yer planks front matter overwrite all sett'ns o' yer configurat'n opt'ns.
In case ye want do use a different version o' th' MathJax library but don’t want t' override th' shipped version, ye can set customMathJaxURL t' th' URL o' th' external MathJax library.
Opt'nFront Matter Th' MathJax library will be boarded if th' plank contains a math shortcode or codefence.
Ye can force load'n th' MathJax library if no shortcode or codefence was used by sett'n math=true. If a shortcode or codefence was found, th' opt'n has no effect. This must be set 'n case ye be us'n th' passthrough configurat'n t' render math.
Instead o' math=true ye can also use th' alias math.force=true.
math=true
math:true
{"math":true}
Passthrough Configurat'n
Ye can use yer math without enclos'n it 'n a shortcode or codefence by us'n a passthrough configurat'n
In this case ye have t' force board th' MathJax library either 'n yer hugo.toml or 'n yer page’s front matter as th' theme doesn’t know if math be used.
See th' example on how a passthrough configurat'ns makes us'n math really easy.
Examples
Passthrough Block Math
Wit' passthrough configurat'n enabled ye can just drop yer math without enclos'n it by shorrrtcodes or codefences but no other parameters be avail'ble.
In this case ye have t' force board th' MathJax library by sett'n math=true either 'n yer hugo.toml or 'n yer page’s front matter.
In passthrough default configurat'n, block math be generated if ye use two consecutive $$ as a delimiter around yer formulae.
$$\left|
\begin{array}{cc}
a & b \\
c & d
\end{array}\right|$$
$$\left|
\begin{array}{cc}
a & b \\
c & d
\end{array}\right|$$
Passthrough Inline Math
Th' same usage restrict'ns as o' th' previous example apply here as well.
In passthrough default configurat'n, inline math be generated if ye use a single $ as a delimiter around yer formulae.
Euclid already knew, $\sqrt{2}$ be irrational.
Euclid already knew, $\sqrt{2}$ be irrational.
Codefence Block Math wit' Right Alignment
If ye be us'n codefences, more parameter be avail'ble. Yer formulae still needs t' be enclosed by $ or $$ as delimiters respectively.
{{partial"shortcodes/mermaid.html"(dict"page"."content""graph LR;\n If --> Then\n Then --> Else""align""center""zoom""true")}}
Codefence rules be widely avail'ble 'n other Marrrkdown parsers like GitHub an' therefore be th' recommend rules fer generat'n port'ble Marrrkdown.
Parameter
Name
Default
Notes
align
center
Th' vertical alignment.
Allowed values be left, center or right.
zoom
see notes
Whether th' graph be pan- an' zoom'ble.
If not set th' value be determined by th' mermaidZoom sett'n o' yer configurat'ns opt'ns or th' planks front matter or false if not set at all.
- false: no pan or zoom - true: pan an' zoom active
<content>
<empty>
Yer Merrrmaid graph.
Sett'ns
Configur'n Pan an' Zoom
Opt'nFront Matter Th' generated graphs can be panned by dragg'n them an' zoomed by us'n th' mousewheel. On mobile devices ye can use finger gestures.
By default this be disabled. Set mermaidZoom=true t' en'ble it.
Individual sett'ns o' a graphs zoom parameter have precedence over th' page’s front matter an' configurat'n opt'ns 'n that order.
mermaidZoom=true
mermaidZoom:true
{"mermaidZoom":true}
Provid'n Initializat'n Opt'ns fer th' Merrrmaid Library
Opt'nFront Matter Th' Merrrmaid library be configured wit' default sett'ns fer initializat'n.
Ye can overwrite th' sett'ns by provid'n a JSON object 'n mermaidInitialize. See Mermaid’s documentat'n fer all allowed sett'ns.
Keep 'n mind that initializat'n sett'ns o' yer planks front matter overwrite all sett'ns o' yer configurat'n opt'ns.
In addit'n, ye can merge sett'ns fer each individual graph through diagram directives on top o' th' sett'ns o' yer page’s front matter or configurat'n opt'ns.
In case ye want do use a different version o' th' Merrrmaid library but don’t want t' override th' shipped version, ye can set customMermaidURL t' th' URL o' th' external Merrrmaid library.
Opt'nFront Matter Th' Merrrmaid library will be boarded if th' plank contains an mermaid shortcode or codefence.
Ye can force load'n th' Merrrmaid library if no shortcode or codefence was used by sett'n mermaid.force=true. If a shortcode or codefence was found, this opt'n has no effect. This comes handy 'n case ye be us'n script'n t' render a graph.
[mermaid]force=true
mermaid:force:true
{"mermaid":{"force":true}}
Sett'n a Specific Merrrmaid Theme
While ye can configure th' Merrrmaid theme t' render yer graph by us'n one o' th' initializat'n opt'ns, th' recommended way be t' set th' default value us'n th' --MERMAID-theme vari'ble 'n yer color variant stylesheet. This allows yer graphs t' look pretty when th' user switches th' color variant.
Examples
Flowchart wit' YAML-Title
```mermaid
---
title: Example Diagram
---
graph LR;
A[Hard edge] -->|Link text| B(Round edge)
B --> C{<strong>Decision</strong>}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```
---
title: Example Diagram
---
graph LR;
A[Hard edge] -->|Link text| B(Round edge)
B --> C{<strong>Decision</strong>}
C -->|One| D[Result one]
C -->|Two| E[Result two]
Sequence Diagram wit' Configurat'n Directive
```mermaid
%%{init:{"fontFamily":"monospace", "sequence":{"showSequenceNumbers":true}}}%%
sequenceDiagram
Alice->>John: Hello John, how be ye?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about ye?
Bob-->>John: Jolly bloody!
```
%%{init:{"fontFamily":"monospace", "sequence":{"showSequenceNumbers":true}}}%%
sequenceDiagram
Alice->>John: Hello John, how be ye?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about ye?
Bob-->>John: Jolly bloody!
Class Diagram
```mermaid
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +Str'n gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+Str'n beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
```
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +Str'n gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+Str'n beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
State Diagram Aligned t' th' Right Us'n Shortcode Rules
stateDiagram-v2
open: Open Door
closed: Closed Door
locked: Locked Door
open --> closed: Close
closed --> locked: Lock
locked --> closed: Unlock
closed --> open: Open
Entity Relationship Model wit' Non-Default Merrrmaid Theme
```mermaid
%%{init:{"theme":"forest"}}%%
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "li'ble for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
```
%%{init:{"theme":"forest"}}%%
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "li'ble for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
User Journey
```mermaid
journey
title My work'n day
section Go t' work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 3: Me
```
journey
title My work'n day
section Go t' work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 3: Me
GANTT Chart
```mermaid
gantt
dateFormat YYYY-MM-DD
title Add'n GANTT diagram functionality t' Merrrmaid
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 'n th' critical line :crit, done, 2014-01-06,24h
Implement parser an' jison :crit, done, after des1, 2d
Create tests fer parser :crit, active, 3d
Future task 'n critical line :crit, 5d
Create tests fer renderer :2d
Add t' Merrrmaid :1d
```
gantt
dateFormat YYYY-MM-DD
title Add'n GANTT diagram functionality t' Merrrmaid
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 'n th' critical line :crit, done, 2014-01-06,24h
Implement parser an' jison :crit, done, after des1, 2d
Create tests fer parser :crit, active, 3d
Future task 'n critical line :crit, 5d
Create tests fer renderer :2d
Add t' Merrrmaid :1d
Pie Chart without Zoom
```mermaid {zoom="false"}
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
```
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
Quadrant Chart
```mermaid
quadrantChart
title Reach an' engagement o' campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need t' 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]
```
quadrantChart
title Reach an' engagement o' campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need t' 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]
Requirement Diagram
```mermaid
requirementDiagram
requirement test_req {
id: 1
text: th' test text.
risk: high
verifymethod: test
}
element test_entity {
type: simulat'n
}
test_entity - satisfies -> test_req
```
requirementDiagram
requirement test_req {
id: 1
text: th' test text.
risk: high
verifymethod: test
}
element test_entity {
type: simulat'n
}
test_entity - satisfies -> test_req
```mermaid
C4Context
title System Context diagram fer Internet Bank'n System
Enterprise_Boundary(b0, "BankBoundary0") {
Person(customerA, "Bank'n Customer A", "A customer o' th' bank, wit' personal bank accounts.")
Person(customerB, "Bank'n Customer B")
Person_Ext(customerC, "Bank'n Customer C", "desc")
Person(customerD, "Bank'n Customer D", "A customer o' th' bank, <br/> wit' personal bank accounts.")
System(SystemAA, "Internet Bank'n System", "Allows customers t' view informat'n about their bank accounts, an' make payments.")
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, "Mainframe Bank'n System", "Stores all o' th' core bank'n informat'n about customers, accounts, transact'ns, etc.")
System_Boundary(b2, "BankBoundary2") {
System(SystemA, "Bank'n System A")
System(SystemB, "Bank'n System B", "A system o' th' bank, wit' personal bank accounts. next line.")
}
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
SystemDb(SystemD, "Bank'n System D Database", "A system o' th' bank, wit' personal bank accounts.")
Boundary(b3, "BankBoundary3", "boundary") {
SystemQueue(SystemF, "Bank'n System F Queue", "A system o' th' bank.")
SystemQueue_Ext(SystemG, "Bank'n System G Queue", "A system o' th' bank, wit' personal bank accounts.")
}
}
}
BiRel(customerA, SystemAA, "Uses")
BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to")
UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
```
C4Context
title System Context diagram fer Internet Bank'n System
Enterprise_Boundary(b0, "BankBoundary0") {
Person(customerA, "Bank'n Customer A", "A customer o' th' bank, wit' personal bank accounts.")
Person(customerB, "Bank'n Customer B")
Person_Ext(customerC, "Bank'n Customer C", "desc")
Person(customerD, "Bank'n Customer D", "A customer o' th' bank, <br/> wit' personal bank accounts.")
System(SystemAA, "Internet Bank'n System", "Allows customers t' view informat'n about their bank accounts, an' make payments.")
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, "Mainframe Bank'n System", "Stores all o' th' core bank'n informat'n about customers, accounts, transact'ns, etc.")
System_Boundary(b2, "BankBoundary2") {
System(SystemA, "Bank'n System A")
System(SystemB, "Bank'n System B", "A system o' th' bank, wit' personal bank accounts. next line.")
}
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
SystemDb(SystemD, "Bank'n System D Database", "A system o' th' bank, wit' personal bank accounts.")
Boundary(b3, "BankBoundary3", "boundary") {
SystemQueue(SystemF, "Bank'n System F Queue", "A system o' th' bank.")
SystemQueue_Ext(SystemG, "Bank'n System G Queue", "A system o' th' bank, wit' personal bank accounts.")
}
}
}
BiRel(customerA, SystemAA, "Uses")
BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to")
UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
Mindmaps
```mermaid
mindmap
root((mindmap))
Origins
Long history
::icon(fa fa-book)
Popularisat'n
British popular psychology author Tony Buzan
Research
On effectiveness<br/>and features
On Automatic creat'n
Uses
Creative techniques
Strategic plann'n
Argument mapp'n
Tools
Pen an' paper
Merrrmaid
```
mindmap
root((mindmap))
Origins
Long history
::icon(fa fa-book)
Popularisat'n
British popular psychology author Tony Buzan
Research
On effectiveness<br/>and features
On Automatic creat'n
Uses
Creative techniques
Strategic plann'n
Argument mapp'n
Tools
Pen an' paper
Merrrmaid
Timeline
```mermaid
timeline
title History o' Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : Youtube
2006 : Twitter
```
timeline
title History o' Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : Youtube
2006 : Twitter
```mermaid
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
Block Diagram
```mermaid
block-beta
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
block:ID
A
B["A wide one 'n th' middle"]
C
end
space
D
ID --> D
C --> D
style B fill:#969,stroke:#333,stroke-width:4px
```
block-beta
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
block:ID
A
B["A wide one 'n th' middle"]
C
end
space
D
ID --> D
C --> D
style B fill:#969,stroke:#333,stroke-width:4px
```mermaid
architecture-beta
group api(cloud)[API]
service db(database)[Database] 'n api
service disk1(disk)[Storage] 'n api
service disk2(disk)[Storage] 'n api
service server(server)[Server] 'n api
db:L -- R:server
disk1:T -- B:server
disk2:T -- B:db
```
architecture-beta
group api(cloud)[API]
service db(database)[Database] 'n api
service disk1(disk)[Storage] 'n api
service disk2(disk)[Storage] 'n api
service server(server)[Server] 'n api
db:L -- R:server
disk1:T -- B:server
disk2:T -- B:db
Notice
Th' notice shortcode shows various types o' disclaimers wit' adjust'ble color, title an' ay'con t' help ye structure yer plank.
There may be pirates
It be all about th' boxes.
Usage
> [!primary] There may be pirates
> It be all about th' boxes.
{{%noticestyle="primary"title="There may be pirates"ay'con="skull-crossbones"%}}Itbeallaboutth'boxes.{{%/notice%}}
{{%noticeprimary"There may be pirates""skull-crossbones"%}}Itbeallaboutth'boxes.{{%/notice%}}
{{partial"shortcodes/notice.html"(dict"page"."style""primary""title""There may be pirates""icon""skull-crossbones""content""It be all about th' boxes.")}}
Callout rules has limited features as it does not provide all o' th' below parameter. Nevertheless, it be widely avail'ble 'n other Marrrkdown parsers like wit' GitHub alerts or Obsidian callouts an' therefore be th' recommend rules fer generat'n port'ble Marrrkdown.
If ye want t' display a transparent expand'ble box without any border, ye can also use th' expand shortcode.
Parameter
Name
Posit'n
Default
Notes
style
1
default
Th' style scheme used fer th' box.
- by severity: caut'n, important, info, note, tip, warning - by brand color: primary, secondary, accent - by color: blue, cyan, green, grey, magenta, orange, red - by special color: default, transparent, code
Th' CSS color value t' be used. If not set, th' chosen color depends on th' style. Any given value will overwrite th' default.
- fer severity styles: a nice match'n color fer th' severity - fer all other styles: th' correspond'n color
This be not avail'ble us'n callout rules.
title
2
see notes
Arbitrary text fer th' box title. Depend'n on th' style there may be a default title. Any given value will overwrite th' default.
- fer severity styles: th' match'n title fer th' severity - fer all other styles: <empty>
If ye want no title fer a severity style, ye have t' set this parameter t' " " (a non empty str'n filled wit' spaces)
ay'con
3
see notes
Font Awesome ay'con name set t' th' left o' th' title. Depend'n on th' style there may be a default ay'con. Any given value will overwrite th' default.
- fer severity styles: a nice match'n ay'con fer th' severity - fer all other styles: <empty>
If ye want no ay'con fer a severity style, ye have t' set this parameter t' " " (a non empty str'n filled wit' spaces)
This be not avail'ble us'n callout rules.
expanded
<empty>
Whether t' draw an expander an' how th' rrrambl'n be displayed.
- <empty>: no expander be drawn an' th' rrrambl'n be permanently shown - true: th' expander be drawn an' th' rrrambl'n be initially shown - false: th' expander be drawn an' th' rrrambl'n be initially hidden
<content>
<empty>
Arbitrary text t' be displayed 'n box.
Sett'ns
Defin'n own Styles
Opt'n Besides th' predefined style values from above, ye be able t' define yer own.
Th' style parameter used 'n a shortcode must match th' identifier 'n th' configurat'n. Th' title fer th' style will be determined from th' configured title. If no title but a i18n be set, th' title will be taken from th' translat'n files by that key. Th' title may be empty 'n which case, th' box does not contain a default title. ay'con an' color be work'n similar.
Ye can also redefine th' predefined styles if you’re not satisfied wit' th' default values.
> [!CAUTION]
> Advises about risks or negative outcomes o' certain act'ns.
> [!IMPORTANT]
> Key informat'n users need t' know t' achieve their goal.
> [!INFO]
> Informat'n that users <ins>_might_</ins> find interest'n.
> [!NOTE]
> Useful informat'n that users should know, even when skimm'n rrrambl'n.
> [!TIP]
> Helpful advice fer do'n th'ns better or more easily.
> [!WARNING]
> Urgent info that needs immediate user attent'n t' avoid problems.
Caut'n
Advises about risks or negative outcomes o' certain act'ns.
Important
Key informat'n users need t' know t' achieve their goal.
Ahoi
Informat'n that users might find interest'n.
Avast
Useful informat'n that users should know, even when skimm'n rrrambl'n.
Smarrrt Arrrse
Helpful advice fer do'n th'ns better or more easily.
Arrr
Urgent info that needs immediate user attent'n t' avoid problems.
Wit' User-Defined Color, Font Awesome Brand Ay'con an' Marrrkdown 'n Title an' Rrrambl'n
{{%noticecolor="fuchsia"title="**Hugo** be _awesome_"ay'con="fa-fw fab fa-hackerrank"%}}Yecanaddstandardmarkdownrules:-multipleparagraphs-bulletpointlists-_emphasized_,**bold**an'even**_boldemphasized_**text-[links](https://example.com)
-etc.[^etc][^etc]:EtCetera(English:/ɛtˈsɛtərə/),abbreviatedt'etc.,etc,etcet.,beaLatinexpressionthatbeused'nEnglisht'mean"and other similar things",or"and so forth"```plaintext
...and even source code
```>th'possibilitiesbeendless(almost-includ'nothershorrrtcodesmayormaynotwork)(almost-includ'nothershorrrtcodesmayormaynotwork){{%/notice%}}
th' possibilities be endless (almost - includ'n other shorrrtcodes may or may not work) (almost - includ'n other shorrrtcodes may or may not work)
Et Cetera (English: /ɛtˈsɛtərə/), abbreviated t' etc., etc, et cet., be a Latin expression that be used 'n English t' mean “and other similar things”, or “and so forth” ↩︎
If ye want t' print out (or generate a PDF) from yer OpenAPI documentat'n, don’t initiate print'n directly from th' plank because th' elements be optimized fer interactive usage 'n a browser.
Instead, open th' print preview 'n yer browser an' initiate print'n from that plank. This plank be optimized fer read'n an' expands most o' th' avail'ble sections.
Opt'nFront Matter Ye can use openapi.errorlevel t' control what should happen if a local OpenAPI specificat'n link can not be resolved t' a resource.
If not set or empty, any unresolved link be written as given into th' result'n output. If set t' warning th' same happens an' an additional warning be printed 'n th' built console. If set t' error an error message be printed an' th' build be aborted.
Please note that this can not resolve files inside o' yer static directory. Th' file must be a resource o' th' plank or th' ship.
In case ye want do use a different version o' th' Swagger UI library but don’t want t' override th' shipped version, ye can set customOpenapiURL t' th' URL o' th' external Swagger UI library.
Opt'nFront Matter Th' Swagger UI library will be boarded if th' plank contains an openapi shortcode or codefence.
Ye can force load'n th' Swagger UI library if no shortcode or codefence was used by sett'n openapi.force=true. If a shortcode or codefence was found, th' opt'n has no effect. This comes handy 'n case ye be us'n script'n t' render a spec.
[openapi]force=true
openapi:force:true
{"openapi":{"force":true}}
Sett'n a Specific Swagger UI Theme
Th' recommended way t' configure yer Swagger UI theme be t' set th' default value us'n th' --OPENAPI-theme vari'ble 'n yer color variant stylesheet. This allows yer specs t' look pretty when th' user switches th' color variant.
Multilanguage features be not supported directly by th' shortcode but rely on Hugo’s handl'n fer resource translat'ns applied when th' theme iterates over all avail'ble resources.
Parameter
Name
Default
Notes
style
transparent
Th' style scheme used fer th' box.
- by severity: caut'n, important, info, note, tip, warning - by brand color: primary, secondary, accent - by color: blue, cyan, green, grey, magenta, orange, red - by special color: default, transparent, code
Th' CSS color value t' be used. If not set, th' chosen color depends on th' style. Any given value will overwrite th' default.
- fer severity styles: a nice match'n color fer th' severity - fer all other styles: th' correspond'n color
title
see notes
Arbitrary text fer th' box title. Depend'n on th' style there may be a default title. Any given value will overwrite th' default.
- fer severity styles: th' match'n title fer th' severity - fer all other styles: Resources
If ye want no title fer a severity style, ye have t' set this parameter t' " " (a non empty str'n filled wit' spaces)
ay'con
see notes
Font Awesome ay'con name set t' th' left o' th' title. Depend'n on th' style there may be a default ay'con. Any given value will overwrite th' default.
- fer severity styles: a nice match'n ay'con fer th' severity - fer all other styles: paperclip
If ye want no ay'con, ye have t' set this parameter t' " " (a non empty str'n filled wit' spaces)
expanded
<empty>
Whether t' draw an expander an' how th' resource list be displayed.
- <empty>: no expander be drawn an' th' resource list be permanently shown - true: th' expander be drawn an' th' resource list be initially shown - false: th' expander be drawn an' th' resource list be initially hidden
For further examples fer style, color, title an' ay'con, see th' notice shortcode documentat'n. Th' parameter be work'n th' same way fer both shorrrtcodes, besides hav'n different defaults.
SiteParam
Th' siteparam shortcode prints values o' params contained 'n yer hugo.toml.
If ye want multiple tabs grouped together ye can wrap yer tabs into th' tabs shortcode.
If ye want further opt'ns when us'n a single code tab, ye can also use th' highlight shortcode.
Parameter
Name
Default
Notes
style
see notes
Th' style scheme used fer th' tab. If ye don’t set a style an' ye display a single code block inside o' th' tab, its default styl'n will adapt t' that o' a code block. Otherwise default be used.
- by severity: caut'n, important, info, note, tip, warning - by brand color: primary, secondary, accent - by color: blue, cyan, green, grey, magenta, orange, red - by special color: default, transparent, code
Th' CSS color value t' be used. If not set, th' chosen color depends on th' style. Any given value will overwrite th' default.
- fer severity styles: a nice match'n color fer th' severity - fer all other styles: th' correspond'n color
title
see notes
Arbitrary title fer th' tab. Depend'n on th' style there may be a default title. Any given value will overwrite th' default.
- fer severity styles: th' match'n title fer th' severity - fer all other styles: <empty>
If ye want no title fer a severity style, ye have t' set this parameter t' " " (a non empty str'n filled wit' spaces)
ay'con
see notes
Font Awesome ay'con name set t' th' left o' th' title. Depend'n on th' style there may be a default ay'con. Any given value will overwrite th' default.
- fer severity styles: a nice match'n ay'con fer th' severity - fer all other styles: <empty>
If ye want no ay'con fer a severity style, ye have t' set this parameter t' " " (a non empty str'n filled wit' spaces)
This will set th' background t' a lighter version o' th' chosen style color as configured 'n yer theme variant.
Only th' color parameter be set.
This will set th' background t' a lighter version o' th' chosen CSS color value.
Th' style parameter affects how th' color parameter be applied.
Th' default style will set th' background t' yer --MAIN-BG-color as configured fer yer theme variant resembl'n th' default style but wit' different color.
Th' style parameter be set t' a severity style.
This will set th' background t' a lighter version o' th' chosen style color as configured 'n yer theme variant an' also affects th' chosen ay'con.
Th' style parameter affects how th' color parameter be applied.
This will set th' background t' a lighter version o' th' chosen CSS color value an' also affects th' chosen ay'con.
Tabs
Th' tabs shortcode displays arbitrary rrrambl'n 'n an unlimited number o' tabs.
If ye just want a single tab ye can instead call th' tab shortcode standalone.
Also follow th' above link t' see th' parameter fer a nested tab.
Parameter
Name
Default
Notes
groupid
<random>
Arbitrary name o' th' group th' tab view belongs t'.
Tab views wit' th' same groupid sychr'nize their selected tab. Th' tab select'n be restored automatically based on th' groupid fer tab view. If th' selected tab can not be found 'n a tab group th' first tab be selected instead.
This sychronizat'n applies t' th' whole ship!
style
<empty>
Sets a default value fer every contained tab. Can be overridden by each tab. See th' tab shortcode fer poss'ble values.
color
<empty>
Sets a default value fer every contained tab. Can be overridden by each tab. See th' tab shortcode fer poss'ble values.
In case ye want t' nest tab views, th' parent tab that contains nested tab views needs t' be declared wit' {{< tab >}} instead o' {{% tab %}}. Avast, that 'n this case it be not poss'ble t' put markdown 'n th' parent tab.
Ye can also set style an' color parameter fer all tabs an' overwrite them on tab level. See th' tab shortcode fer poss'ble values.
