Hugo uses Markdown for its simple content format. However, there are a lot of things that Markdown doesn’t support well. You could use pure HTML to expand possibilities.
But this happens to be a bad idea. Everyone uses Markdown because it’s pure and simple to read even non-rendered. You should avoid HTML to keep it as simple as possible.
To avoid this limitations, Hugo created shortcodes. A shortcode is a simple snippet inside a page.
The Relearn theme provides multiple shortcodes on top of existing ones.
Since Hugo 0.112.0 this only works for leaf bundles. Branch bundles and simple pages must be switched to leaf bundles or you are currently locked to a Hugo version < 0.112.0.
Usage
While the examples are using shortcodes with named parameter you are free to also call this shortcode from your own partials.
- 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
The CSS color value to be used. If not set, the chosen color depends on the style. Any given value will overwrite the default.
- for severity styles: a nice matching color for the severity - for all other styles: the corresponding color
title
see notes
Arbitrary text for the box title. Depending on the style there may be a default title. Any given value will overwrite the default.
- for severity styles: the matching title for the severity - for all other styles: Attachments
If you want no title for a severity style, you have to set this parameter to " " (a non empty string filled with spaces)
icon
see notes
Font Awesome icon name set to the left of the title. Depending on the style there may be a default icon. Any given value will overwrite the default.
- for severity styles: a nice matching icon for the severity - for all other styles: paperclip
If you want no icon, you have to set this parameter to " " (a non empty d with spaces)
sort
asc
Sorting the output in ascending or descending order.
pattern
.*
A regular expressions, used to filter the attachments by file name. For example:
- to match a file suffix of ‘jpg’, use .*\.jpg (not *.\.jpg) - to match file names ending in jpg or png, use .*\.(jpg|png)
Setup
Single language
The shortcode lists files found in a specific folder. The name of the folder depends on your page type (either branch bundle, leaf bundle or page).
If your page is a leaf bundle, attachments must be placed in a nested index.files folder, accordingly.
content
_index.md
page
_index.md
_index.files
attachment.pdf
If your page is a branch bundle, attachments must be placed in a nested _index.files folder, accordingly.
Warning This is only available for Hugo < 0.112.0
content
_index.md
page
index.md
index.files
attachment.pdf
For simple pages, attachments must be placed in a folder named like your page and ending with .files.
Warning This is only available for Hugo < 0.112.0
content
_index.md
page.files
attachment.pdf
page.md
Multilingual
Be aware that if you use a multilingual website, you will need to have as many folders as languages and the language code must be part of the folder name.
Eg. for a site in English and Piratish:
content
index.en.md
index.pir.md
page
index.en.md
index.pir.md
index.en.files
attachment.pdf
index.pir.files
attachment.pdf
Examples
Custom Title, List of Attachments Ending in pdf or mp4
For further examples for style, color, title and icon, see the notice shortcode documentation. The parameter are working the same way for both shortcodes, besides having different defaults.
Badge
The badge shortcode displays little markers in your text with adjustable color, title and icon.
ImportantVersion6.6.6Captain InfoNewAwesome
Usage
While the examples are using shortcodes with named parameter you are free to also call this shortcode from your own partials.
- 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
The CSS color value to be used. If not set, the chosen color depends on the style. Any given value will overwrite the default.
- for severity styles: a nice matching color for the severity - for all other styles: the corresponding color
title
see notes
Arbitrary text for the badge title. Depending on the style there may be a default title. Any given value will overwrite the default.
- for severity styles: the matching title for the severity - for all other styles: <empty>
If you want no title for a severity style, you have to set this parameter to " " (a non empty string filled with spaces)
icon
see notes
Font Awesome icon name set to the left of the title. Depending on the style there may be a default icon. Any given value will overwrite the default.
- for severity styles: a nice matching icon for the severity - for all other styles: <empty>
If you want no icon for a severity style, you have to set this parameter to " " (a non empty string filled with 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
The button shortcode displays a clickable button with adjustable color, title and icon.
Once the button is clicked, it opens another browser tab for the given URL.
Parameter
Name
Default
Notes
href
<empty>
Either the destination URL for the button or JavaScript code to be executed on click. If this parameter is not set, the button will do nothing but is still displayed as clickable.
- if starting with javascript: all following text will be executed in your browser - every other string will be interpreted as URL
style
transparent
The style scheme used for the 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
The CSS color value to be used. If not set, the chosen color depends on the style. Any given value will overwrite the default.
- for severity styles: a nice matching color for the severity - for all other styles: the corresponding color
icon
see notes
Font Awesome icon name set to the left of the title. Depending on the style there may be a default icon. Any given value will overwrite the default.
- for severity styles: a nice matching icon for the severity - for all other styles: <empty>
If you want no icon for a severity style, you have to set this parameter to " " (a non empty string filled with spaces)
iconposition
left
Places the icon to the left or right of the title.
target
see notes
The destination frame/window if href is an URL. Otherwise the parameter is not used. This behaves similar to normal links. If the parameter is not given it defaults to:
- the setting of externalLinkTarget or _blank if not set, for any address starting with http:// or https:// - no specific value for all other links
type
see notes
The button type if href is JavaScript. Otherwise the parameter is not used. If the parameter is not given it defaults to button
<content>
see notes
Arbitrary text for the button title. Depending on the style there may be a default title. Any given value will overwrite the default.
- for severity styles: the matching title for the severity - for all other styles: <empty>
If you want no title for a severity style, you have to set this parameter to " " (a non empty string filled with spaces)
Choose the style used to group all children. It could be any HTML tag name.
style
li
Choose the style used to display each descendant. It could be any HTML tag name.
showhidden
false
When true, child pages hidden from the menu will be displayed as well.
description
false
When true shows a short text under each page in the list. When no description or summary exists for the page, the first 70 words of the content is taken - read more info about summaries on gohugo.io.
depth
1
The depth of descendants to display. For example, if the value is 2, the shortcode will display two levels of child pages. To get all descendants, set this value to a high number eg. 999.
This only works in modern browsers flawlessly. While Internet Explorer 11 has issues in displaying it, the functionality still works.
Usage
While the examples are using shortcodes with named parameter you are free to use positional as well or also call this shortcode from your own partials.
{{%expandtitle="Show me almost **endless** possibilities"%}}Youcanaddstandardmarkdownsyntax:-multipleparagraphs-bulletpointlists-_emphasized_,**bold**andeven**_boldemphasized_**text-[links](https://example.com)
-etc.```plaintext
...and even source code
```>thepossibilitiesareendless(almost-includingothershortcodesmayormaynotwork){{%/expand%}}
the possibilities are endless (almost - including other shortcodes may or may not work)
Highlight
The highlight shortcode renders your code with a syntax highlighter.
1print("Hello World!")
Usage
This shortcode is fully compatible with Hugo’s highlight shortcode but offers some extensions.
It is called interchangeably in the same way as Hugo’s own shortcode providing positional parameter or by simply using codefences.
You are free to also call this shortcode from your own partials. In this case it resembles Hugo’s highlight function syntax if you call this shortcode as a partial using compatiblity syntax.
While the examples are using shortcodes with named parameter it is recommended to use codefences instead. This is because more and more other software supports codefences (eg. GitHub) and so your markdown becomes more portable.
Default values for extension options can be set via params settings in your config.toml or be overwritten by frontmatter for each individual page.
Global Configuration File
Recommended Settings
[markup][markup.highlight]# line numbers in a table layout will shift if code is wrapping, so better# use inline; besides that visually both layouts have the same look and behaviorlineNumbersInTable=false# if `guessSyntax = true`, there will be no unstyled code even if no language# was given BUT Mermaid and Math codefences will not work anymore! So this is a# mandatory setting for your site if you want to use Mermaid or Math codefencesguessSyntax=false# the shipped variants come with their own modified chroma syntax highlightning# style which is imported in theme-relearn-light.css, theme-relearn-dark.css, etc.;# if you want to use a predefined style instead:# - remove `noClasses` or set `noClasses = true`# - set `style` to a predefined style namenoClasses=false# style = "tango"
Optional Settings
[params]highlightWrap=true
Page’s Frontmatter
+++highlightWrap=true+++
Examples
Line Numbers with Starting Offset
As mentioned above, line numbers in a table layout will shift if code is wrapping, so better use inline. To make things easier for you, set lineNumbersInTable = false in your config.toml and add lineNos = true when calling the shortcode instead of the specific values table or inline.
666# the hardest part is to start writing code; here's a kickstart; just copy and paste this; it's free; the next lines will cost you serious credits667print("Hello")668print(" ")669print("World")670print("!")
Codefence with Title
```py { title="python" }
# a bit shorter
print("Hello World!")
```
Font Awesome icon name to be displayed. It will be displayed in the text color of its according context.
Finding an icon
Browse through the available icons in the Font Awesome Gallery. Notice that the free filter is enabled, as only the free icons are available by default.
Once on the Font Awesome page for a specific icon, for example the page for the heart, copy the icon name and paste into the Markdown content.
Customising Icons
Font Awesome provides many ways to modify the icon
Change color (by default the icon will inherit the parent color)
While the shortcode simplifies using standard icons, the icon customization and other advanced features of the Font Awesome library require you to use HTML directly. Paste the <i> HTML into markup, and Font Awesome will load the relevant icon.
Built with <iclass="fas fa-heart"></i> by Relearn and Hugo
Built with by Relearn and Hugo
To use these native HTML elements in your Markdown, add this in your config.toml:
[markup.goldmark.renderer]unsafe=true
Include
The include shortcode includes other files from your project inside of the current page.
Usage
While the examples are using shortcodes with named parameter you are free to use positional aswell or also call this shortcode from your own partials.
When true and the included file contains headings, the first heading will be hidden. This comes in handy, eg. if you include otherwise standalone Markdown files.
the possibilities are endless (almost - including other shortcodes may or may not work) (almost - including other shortcodes may or may not work)
Et Cetera (English: /ɛtˈsɛtərə/), abbreviated to etc., etc, et cet., is a Latin expression that is used in English to mean “and other similar things”, or “and so forth” ↩︎
Math
The math shortcode generates beautiful formatted math and chemical formulae using the MathJax library.
While the examples are using shortcodes with named parameter it is recommended to use codefences instead. This is because more and more other software supports Math codefences (eg. GitHub) and so your markdown becomes more portable.
You are free to also call this shortcode from your own partials.
Note
To use codefence syntax you have to turn off guessSyntax for the markup.highlight setting (see the configuration section).
MathJax is configured with default settings. You can customize MathJax’s default settings for all of your files thru a JSON object in your config.toml or override these settings per page thru your pages frontmatter.
The JSON object of your config.toml / frontmatter is forwarded into MathJax’s configuration object.
To use codefence syntax you have to turn off guessSyntax for the markup.highlight setting.
Global Configuration File
[params]mathJaxInitialize="{ \"chtml\": { \"displayAlign\": \"left\" } }"[markup][markup.highlight]# if `guessSyntax = true`, there will be no unstyled code even if no language# was given BUT Mermaid and Math codefences will not work anymore! So this is a# mandatory setting for your site if you want to use Math codefencesguessSyntax=false
Inline math is generated if you use a single `$` as a delimiter around your formulae: {{<math>}}$\sqrt{3}${{</math>}}
Inline math is generated if you use a single $ as a delimiter around your formulae:
$\sqrt{3}$
Blocklevel Math with Right Alignment
If you delimit your 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 you delimit your formulae by two consecutive $$ it generates a new block.
The mermaid shortcode generates diagrams and flowcharts from text, in a similar manner as Markdown using the Mermaid library.
graph LR;
If --> Then
Then --> Else
Note
This only works in modern browsers.
Usage
While the examples are using shortcodes with named parameter it is recommended to use codefences instead. This is because more and more other software supports Mermaid codefences (eg. GitHub) and so your markdown becomes more portable.
You are free to also call this shortcode from your own partials.
Note
To use codefence syntax you have to turn off guessSyntax for the markup.highlight setting (see the configuration section).
```mermaid { align="center" zoom="true" }
graph LR;
If --> Then
Then --> Else
```
The generated graphs can be be panned by dragging them and zoomed by using the mousewheel. On mobile devices you can use finger gestures.
Parameter
Name
Default
Notes
align
center
Allowed values are left, center or right.
zoom
see notes
Whether the graph is pan- and zoomable.
If not set the value is determined by the mermaidZoom setting of the site or the pages frontmatter or false if not set at all.
- false: no pan or zoom - true: pan and zoom active
<content>
<empty>
Your Mermaid graph.
Configuration
Mermaid is configured with default settings. You can customize Mermaid’s default settings for all of your files thru a JSON object in your config.toml, override these settings per page thru your pages frontmatter or override these setting per diagramm thru diagram directives.
The JSON object of your config.toml / frontmatter is forwarded into Mermaid’s mermaid.initialize() function.
The theme setting can also be set by your used color variant. This will be the sitewide default and can - again - be overridden by your settings in config.toml, frontmatter or diagram directives.
Note
To use codefence syntax you have to turn off guessSyntax for the markup.highlight setting.
Global Configuration File
[params]mermaidInitialize="{ \"theme\": \"dark\" }"mermaidZoom=true[markup][markup.highlight]# if `guessSyntax = true`, there will be no unstyled code even if no language# was given BUT Mermaid and Math codefences will not work anymore! So this is a# mandatory setting for your site if you want to use Mermaid codefencesguessSyntax=false
%%{init:{"fontFamily":"monospace", "sequence":{"showSequenceNumbers":true}}}%%
sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
Class Diagram with Codefence Syntax
```mermaid
classDiagram
Animal <|-- Duck
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()
}
```
classDiagram
Animal <|-- Duck
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()
}
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 with Non-Default Mermaid Theme
journey
title My working day
section Go to 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
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
{{<mermaid>}}C4ContexttitleSystemContextdiagramforInternetBankingSystemEnterprise_Boundary(b0,"BankBoundary0"){Person(customerA,"Banking Customer A","A customer of the bank, with personal bank accounts.")Person(customerB,"Banking Customer B")Person_Ext(customerC,"Banking Customer C","desc")Person(customerD,"Banking Customer D","A customer of the bank, <br/> with personal bank accounts.")System(SystemAA,"Internet Banking System","Allows customers to view information about their bank accounts, and make payments.")Enterprise_Boundary(b1,"BankBoundary"){SystemDb_Ext(SystemE,"Mainframe Banking System","Stores all of the core banking information about customers, accounts, transactions, etc.")System_Boundary(b2,"BankBoundary2"){System(SystemA,"Banking System A")System(SystemB,"Banking System B","A system of the bank, with personal bank accounts. next line.")}System_Ext(SystemC,"E-mail system","The internal Microsoft Exchange e-mail system.")SystemDb(SystemD,"Banking System D Database","A system of the bank, with personal bank accounts.")Boundary(b3,"BankBoundary3","boundary"){SystemQueue(SystemF,"Banking System F Queue","A system of the bank.")SystemQueue_Ext(SystemG,"Banking System G Queue","A system of the bank, with 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 for Internet Banking System
Enterprise_Boundary(b0, "BankBoundary0") {
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
Person(customerB, "Banking Customer B")
Person_Ext(customerC, "Banking Customer C", "desc")
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
System_Boundary(b2, "BankBoundary2") {
System(SystemA, "Banking System A")
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
}
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
Boundary(b3, "BankBoundary3", "boundary") {
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with 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)
Popularisation
British popular psychology author Tony Buzan
Research
On effectiveness<br/>and features
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
Pen and paper
Mermaid
{{<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]
Notice
The notice shortcode shows various types of disclaimers with adjustable color, title and icon to help you structure your page.
There may be pirates
It is all about the boxes.
Usage
While the examples are using shortcodes with named parameter you are free to use positional as well or also call this shortcode from your own partials.
{{%noticestyle="primary"title="There may be pirates"icon="skull-crossbones"%}}Itisallabouttheboxes.{{%/notice%}}
{{%noticeprimary"There may be pirates""skull-crossbones"%}}Itisallabouttheboxes.{{%/notice%}}
{{partial"shortcodes/notice.html"(dict"page"."style""primary""title""There may be pirates""icon""skull-crossbones""content""It is all about the boxes.")}}
Parameter
Name
Position
Default
Notes
style
1
default
The style scheme used for the 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
The CSS color value to be used. If not set, the chosen color depends on the style. Any given value will overwrite the default.
- for severity styles: a nice matching color for the severity - for all other styles: the corresponding color
title
2
see notes
Arbitrary text for the box title. Depending on the style there may be a default title. Any given value will overwrite the default.
- for severity styles: the matching title for the severity - for all other styles: <empty>
If you want no title for a severity style, you have to set this parameter to " " (a non empty string filled with spaces)
icon
3
see notes
Font Awesome icon name set to the left of the title. Depending on the style there may be a default icon. Any given value will overwrite the default.
- for severity styles: a nice matching icon for the severity - for all other styles: <empty>
If you want no icon for a severity style, you have to set this parameter to " " (a non empty string filled with spaces)
<content>
<empty>
Arbitrary text to be displayed in box.
Examples
By Severity
Info with markup
{{%noticestyle="info"%}}An**information**disclaimerYoucanaddstandardmarkdownsyntax:-multipleparagraphs-bulletpointlists-_emphasized_,**bold**andeven***boldemphasized***text-[links](https://example.com)
-etc.```plaintext
...and even source code
```>thepossibilitiesareendless(almost-includingothershortcodesmayormaynotwork){{%/notice%}}
The URL to the OpenAPI specification file. This can be relative to the URL of your page if it is a leaf or branch bundle.
Note
If you want to print out (or generate a PDF) from your OpenAPI documentation, don’t initiate printing directly from the page because the elements are optimized for interactive usage in a browser.
Instead, open the print preview in your browser and initiate printing from that page. This page is optimized for reading and expands most of the available sections.
Example
Using Local File
{{<openapisrc="petstore.json">}}
SiteParam
The siteparam shortcode prints values of site params.
Usage
While the examples are using shortcodes with named parameter you are free to use positional aswell or call this shortcode from your own partials.
The style scheme used for the tab. If you don’t set a style and you display a single code block inside of the tab, its default styling will adapt to that of a code block. Otherwise default is 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
The CSS color value to be used. If not set, the chosen color depends on the style. Any given value will overwrite the default.
- for severity styles: a nice matching color for the severity - for all other styles: the corresponding color
title
see notes
Arbitrary title for the tab. Depending on the style there may be a default title. Any given value will overwrite the default.
- for severity styles: the matching title for the severity - for all other styles: <empty>
If you want no title for a severity style, you have to set this parameter to " " (a non empty string filled with spaces)
icon
see notes
Font Awesome icon name set to the left of the title. Depending on the style there may be a default icon. Any given value will overwrite the default.
- for severity styles: a nice matching icon for the severity - for all other styles: <empty>
If you want no icon for a severity style, you have to set this parameter to " " (a non empty string filled with spaces)
A tab can not only contain code but arbitrary text. In this case text and code will get a margin.
printf("Hello World!");
Understanding style and color Behavior
The style parameter affects how the color parameter is applied.
{{<tabs>}}{{%tabtitle="just colored style"style="blue"%}}The`style`parameterissettoacolorstyle.Thiswillsetthebackgroundtoalighterversionofthechosenstylecolorasconfiguredinyourthemevariant.{{%/tab%}}{{%tabtitle="just color"color="blue"%}}Onlythe`color`parameterisset.ThiswillsetthebackgroundtoalighterversionofthechosenCSScolorvalue.{{%/tab%}}{{%tabtitle="default style and color"style="default"color="blue"%}}The`style`parameteraffectshowthe`color`parameterisapplied.The`default`stylewillsetthebackgroundtoyour`--MAIN-BG-color`asconfiguredforyourthemevariantresemblingthedefaultstylebutwithdifferentcolor.{{%/tab%}}{{%tabtitle="just severity style"style="info"%}}The`style`parameterissettoaseveritystyle.Thiswillsetthebackgroundtoalighterversionofthechosenstylecolorasconfiguredinyourthemevariantandalsoaffectsthechosenicon.{{%/tab%}}{{%tabtitle="severity style and color"style="info"color="blue"%}}The`style`parameteraffectshowthe`color`parameterisapplied.ThiswillsetthebackgroundtoalighterversionofthechosenCSScolorvalueandalsoaffectsthechosenicon.{{%/tab%}}{{</tabs>}}
The style parameter is set to a color style.
This will set the background to a lighter version of the chosen style color as configured in your theme variant.
Only the color parameter is set.
This will set the background to a lighter version of the chosen CSS color value.
The style parameter affects how the color parameter is applied.
The default style will set the background to your --MAIN-BG-color as configured for your theme variant resembling the default style but with different color.
The style parameter is set to a severity style.
This will set the background to a lighter version of the chosen style color as configured in your theme variant and also affects the chosen icon.
The style parameter affects how the color parameter is applied.
This will set the background to a lighter version of the chosen CSS color value and also affects the chosen icon.
Tabs
The tabs shortcode displays arbitrary content in an unlimited number of tabs.
This comes in handy eg. for providing code snippets for multiple languages.
If you just want a single tab you can instead call the tab shortcode standalone.
hello.
print("Hello World!")
echo"Hello World!"
printf("Hello World!");
Usage
While the examples are using shortcodes with named parameter you are free to also call this shortcode from your own partials.
See the tab shortcode for a description of the parameter for nested tabs.
Arbitrary name of the group the tab view belongs to.
Tab views with the same groupid sychronize their selected tab. The tab selection is restored automatically based on the groupid for tab view. If the selected tab can not be found in a tab group the first tab is selected instead.
This sychronization applies to the whole site!
style
<empty>
Sets a default value for every contained tab. Can be overridden by each tab. See the tab shortcode for possible values.
color
<empty>
Sets a default value for every contained tab. Can be overridden by each tab. See the tab shortcode for possible values.
In case you want to nest tab views, the parent tab that contains nested tab views needs to be declared with {{< tab >}} instead of {{% tab %}}. Note, that in this case it is not possible to put markdown in the parent tab.
You can also set style and color parameter for all tabs and overwrite them on tab level. See the tab shortcode for possible values.
