Cap'n Hugo uses Marrrkdown fer its simple rrrambl'n format. However, there be a lot o' th'ns that Marrrkdown doesn’t support well. Ye could use pure HTML t' expand possibilities.
But this happens t' be a bad idea. Everyone uses Marrrkdown because it’s pure an' simple t' read even non-rendered. Ye should avoid HTML t' keep it as simple as poss'ble.
T' avoid this limitat'ns, Cap'n Hugo created shorrrtcodes. A shortcode be a simple snippet inside a plank.
Th' Relearrrn theme provides multiple shorrrtcodes on top o' 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
While th' examples be us'n shorrrtcodes wit' named parameter ye be free t' also call this shortcode from yer own partials.
{{%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%}}
- by severity: info, note, tip, warning - by brand color: primary, secondary, accent - by color: blue, green, grey, orange, red - by special color: default, transparent, code
color
see notes
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.
Once th' button be clicked, it opens another browser tab fer th' given URL.
Parameter
Name
Default
Notes
href
<empty>
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: info, note, tip, warning - by brand color: primary, secondary, accent - by color: blue, green, grey, orange, red - by special color: default, transparent, code
color
see notes
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.
{{%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%}}
th' possibilities be endless (almost - includ'n other shorrrtcodes may or may not work)
Highlight
Arrr! Pirrrates
Fello' pirrrates, grog made us dizzy! Be awarrre some stuff may look weird in this trrranslat'n. Like Merrrmaids, do'n math or chemistrrry and stuff.
Th' highlight shortcode renders yer code wit' a rules highlighter.
1print("Hello World!")
Usage
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 provid'n positional parameter or by simply us'n 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 this shortcode as a partial us'n compatibility rules.
While th' examples be us'n shorrrtcodes wit' named parameter it be recommended t' use codefences instead. This be because more an' more other software supports codefences (eg. GitHub) an' so yer markdown becomes more port'ble.
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("!")
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 files from yer project inside o' th' current plank.
Usage
While th' examples be us'n shorrrtcodes wit' named parameter ye be free t' use positional as well or also call this shortcode from yer own partials.
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.
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
Arrr! Pirrrates
Fello' pirrrates, grog made us dizzy! Be awarrre some stuff may look weird in this trrranslat'n. Like Merrrmaids, do'n math or chemistrrry and stuff.
Th' math shortcode generates beautiful formatted math an' chemical formulae us'n th' MathJax library.
While th' examples be us'n shorrrtcodes wit' named parameter it be recommended t' use codefences instead. This be because more an' more other software supports Math codefences (eg. GitHub) an' so yer markdown becomes more port'ble.
Ye be free t' also call this shortcode from yer own partials.
Math be also us'ble without enclos'n it 'n a shortcode or codefence but requires configurat'n by ye. In this case no parameter from th' below t'ble be avail'ble.
MathJax be configured wit' default sett'ns but ye can cust'mize MathJax’s default sett'ns fer all o' yer files through a JSON object 'n yer hugo.toml or override these sett'ns per plank through yer planks frontmatter.
Th' JSON object o' yer hugo.toml / frontmatter be forwarded into MathJax’s configurat'n object.
Usually ye don’t need t' redefine th' global initializat'n sett'ns fer a single plank. But if ye do, ye have repeat all th' values from yer global configurat'n ye want t' keep fer a single plank as well.
Eg. If ye have redefined th' delimiters t' someth'n exotic like @ symbols 'n yer global config, but want t' additionally align yer math t' th' left fer a specific plank, ye have t' put this t' yer frontmatter:
In this case ye have t' tell th' theme that yer plank contains math by sett'n this 'n yer page’s frontmatter:
+++disableMathJax=false+++
---disableMathJax:false---
{"disableMathJax":false}
See th' example on how it makes us'n math really easy.
Examples
Inline Math
Inline math be generated if ye use a single `$` as a delimiter around yer formulae: {{<math>}}$\sqrt{3}${{</math>}}
Inline math be generated if ye use a single $ as a delimiter around yer formulae:
$\sqrt{3}$
Blocklevel Math wit' Right Alignment
If ye delimit yer formulae by two consecutive `$$` it generates a new block.
{{<mathalign="right">}}
$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
{{</math>}}
If ye delimit yer formulae by two consecutive $$ it generates a new block.
This works fer block as well as inline math but be only avail'ble if ye be us'n th' passthrough configurat'n.
Wit' passthrough configurat'n ye can just drop yer math without enclosed by shorrrtcodes or codefences but no sett'ns from th' parameter t'ble be avail'ble.
$$\left|
\begin{array}{cc}
a & b \\
c & d
\end{array}\right|$$
$$\left|
\begin{array}{cc}
a & b \\
c & d
\end{array}\right|$$
Fello' pirrrates, grog made us dizzy! Be awarrre some stuff may look weird in this trrranslat'n. Like Merrrmaids, do'n math or chemistrrry and stuff.
Th' mermaid shortcode generates diagrams an' flowcharts from text, 'n a similar manner as Marrrkdown us'n th' Merrrmaid library.
graph LR;
If --> Then
Then --> Else
Usage
While th' examples be us'n shorrrtcodes wit' named parameter it be recommended t' use codefences instead. This be because more an' more other software supports Merrrmaid codefences (eg. GitHub) an' so yer markdown becomes more port'ble.
Ye be free t' also call this shortcode from yer own partials.
```mermaid { align="center" zoom="true" }
graph LR;
If --> Then
Then --> Else
```
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.
Parameter
Name
Default
Notes
align
center
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' th' ship or th' planks frontmatter or false if not set at all.
- false: no pan or zoom - true: pan an' zoom active
<content>
<empty>
Yer Merrrmaid graph.
Configurat'n
Merrrmaid be configured wit' default sett'ns. Ye can cust'mize Mermaid’s default sett'ns fer all o' yer files through a JSON object 'n yer hugo.toml, override these sett'ns per plank through yer planks frontmatter or override these sett'n per diagramm through diagram directives.
Th' JSON object o' yer hugo.toml / frontmatter be forwarded into Mermaid’s mermaid.initialize() funct'n.
Th' theme sett'n can also be set by yer used color variant. This will be th' sitewide default an' can - again - be overridden by yer sett'ns 'n hugo.toml, frontmatter or diagram directives.
%%{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 wit' Codefence Rules
```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()
}
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
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
{{<mermaid>}}C4ContexttitleSystemContextdiagramferInternetBank'nSystemEnterprise_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"){{</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")
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
{{<mermaid>}}xychart-betatitle"Sales Revenue"x-axis[jan,feb,mar,apr,may,jun,jul,aug,sep,oct,nov,dec]y-axis"Revenue (in $)"4000-->11000bar[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]{{</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]
Block Diagram
{{<mermaid>}}block-betacolumns1db(("DB"))blockArrowId6<[" "]>(down)block:IDAB["A wide one 'n th' middle"]CendspaceDID-->DC-->DstyleBfill:#969,stroke:#333,stroke-width:4px{{</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
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
While th' examples be us'n shorrrtcodes wit' named parameter ye be free t' use positional as well or also call this shortcode from yer own partials.
{{%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.")}}
Parameter
Name
Posit'n
Default
Notes
style
1
default
Th' style scheme used fer th' box.
- by severity: info, note, tip, warning - by brand color: primary, secondary, accent - by color: blue, green, grey, orange, red - by special color: default, transparent, code
color
see notes
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
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)
<content>
<empty>
Arbitrary text t' be displayed 'n box.
Examples
By Severity
Ahoi wit' marrrkup
{{%noticestyle="info"%}}An**informat'n**disclaimerYecanaddstandardmarkdownrules:-multipleparagraphs-bulletpointlists-_emphasized_,**bold**an'even***boldemphasized***text-[links](https://example.com)
-etc.```plaintext
...and even source code
```>th'possibilitiesbeendless(almost-includ'nothershorrrtcodesmayormaynotwork){{%/notice%}}
Th' URL t' th' OpenAPI specificat'n file. This can be relative t' th' URL o' yer plank if it be a leaf or branch bundle.
Avast
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.
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: info, note, tip, warning - by brand color: primary, secondary, accent - by color: blue, green, grey, orange, red - by special color: default, transparent, code
color
see notes
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 d wit' spaces)
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' ship params.
Usage
While th' examples be us'n shorrrtcodes wit' named parameter ye be free t' use positional as well or call this shortcode from yer own partials.
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: info, note, tip, warning - by brand color: primary, secondary, accent - by color: blue, green, grey, orange, red - by special color: default, transparent, code
color
see notes
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.
This comes 'n handy eg. fer provid'n code snippets fer multiple languages.
If ye just want a single tab ye can instead call th' tab shortcode standalone.
hello.
print("Hello World!")
echo"Hello World!"
printf("Hello World!");
Usage
While th' examples be us'n shorrrtcodes wit' named parameter ye be free t' also call this shortcode from yer own partials.
See th' tab shortcode fer a descript'n o' th' parameter fer nested tabs.
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.
