Shortcodes

Markdown is a convenient and simple format to write in. However, it doesn’t always do everything we want (or do it in a nice way). Rather than adding raw HTML to our source files, Hugo allows us to use shortcodes. Shortcodes are small snippets that look like this

{{< _shortcodename parameters_ >}}

that Hugo renders using a predefined template.

Here are some shortcodes used by this theme.

`admonition`#

Create note, warning, information, and tip notices.

{{< admonition attention >}}
This is an attention admonition.
{{< /admonition >}}

{{< admonition caution >}}
This is a caution admonition.
{{< /admonition >}}

{{< admonition danger >}}
This is a danger admonition.
{{< /admonition >}}

{{< admonition error >}}
This is an error admonition.
{{< /admonition >}}

{{< admonition hint >}}
This is an hint admonition.
{{< /admonition >}}

{{< admonition important >}}
This is an important admonition.
{{< /admonition >}}

{{< admonition mission >}}
This is our mission.
{{< /admonition >}}

{{< admonition note >}}
This is a note admonition.
{{< /admonition >}}

{{< admonition seealso >}}
This is a seealso admonition.
{{< /admonition >}}

{{< admonition tip >}}
This is a tip admonition.
{{< /admonition >}}

{{< admonition warning>}}
This is a warning admonition.
{{</* /admonition >}}

{{< admonition values >}}
This is our values.
{{< /admonition >}}

This example renders as:

Attention

This is an attention admonition.

Caution

This is a caution admonition.

Danger

This is a danger admonition.

Error

This is an error admonition.

Hint

This is an hint admonition.

Important

This is an important admonition.

Mission

This is our mission.

Note

This is a note admonition.

Seealso

This is a seealso admonition.

Tip

This is a tip admonition.

Warning

This is a warning admonition.

Values

This is our values.

`badge`#

Create badges in various styles.

{{< badge primary >}}
primary
{{< /badge >}}

{{< badge secondary >}}
secondary
{{< /badge >}}

{{< badge success >}}
success
{{< /badge >}}

{{< badge primary outline >}}
primary outline
{{< /badge >}}

{{< badge secondary outline >}}
secondary outline
{{< /badge >}}

{{< badge success outline >}}
success outline
{{< /badge >}}

This example renders as:

primary secondary success primary outline secondary outline success outline

`button`#

Create button links in various styles.

{{< button info >}}
label: Info
link: http://example.com/
{{< /button >}}

{{< button success >}}
label: Success
link: http://example.com/
{{< /button >}}

{{< button warning >}}
label: Warning
link: http://example.com/
{{< /button >}}

{{< button danger >}}
label: Danger
link: http://example.com/
{{< /button >}}

{{< button muted >}}
label: Muted
link: http://example.com/
{{< /button >}}

{{< button light >}}
label: Light
link: http://example.com/
{{< /button >}}

{{< button dark >}}
label: Dark
link: http://example.com/
{{< /button >}}

<p>

{{< button outline-info >}}
label: Info
link: http://example.com/
{{< /button >}}

{{< button outline-success >}}
label: Success
link: http://example.com/
{{< /button >}}

{{< button outline-warning >}}
label: Warning
link: http://example.com/
{{< /button >}}

{{< button outline-danger >}}
label: Danger
link: http://example.com/
{{< /button >}}

{{< button outline-muted >}}
label: Muted
link: http://example.com/
{{< /button >}}

{{< button outline-light >}}
label: Light
link: http://example.com/
{{< /button >}}

{{< button outline-dark >}}
label: Dark
link: http://example.com/
{{< /button >}}

This example renders as:

Info Success Warning Danger Muted Light Dark

`card`#

Cards

{{< card >}}
title = 'Only title'
{{< /card >}}

{{< card >}}
body = '''
Only body.

But with multiple text paragraphs.
'''
{{< /card >}}

{{< card >}}
title = 'Heading and body'
body = '''
Content of the third card.

{{< badge primary >}}Sample badge{{< /badge >}}
'''
{{< /card >}}

{{< card >}}
title = 'A card with a dropdown menu'
body = '''
{{< dropdown >}}
title = 'Click to expand dropdown'
icon = 'fa-solid fa-eye'
body = 'Hidden content'
{{< /dropdown >}}
'''
{{< /card >}}

{{< card >}}
title = 'A clickable card'
link = 'https://example.com'
{{< /card >}}

{{< card >}}
header = 'Header'
title = 'Card Title'
body = 'Card content'
footer = 'Footer'
{{< /card >}}

This example renders as:

Only title

Only body.

But with multiple text paragraphs.

Heading and body

Content of the third card.

Sample badge

A card with a dropdown menu

A clickable card

Header

Card Title

Card content

Footer

`details`#

Hide the details.

{{< details "**Sunday**" >}}
| Time | Description |
|------|-------------|
| | Arrive |
| | Dinner (self organized) |
{{< /details >}}

This example renders as:

Sunday

Time	Description
	Arrive
	Dinner (self organized)

`dropdown`#

Dropdowns

{{< dropdown >}}
body = 'And with no title and some content!'
{{< /dropdown >}}

{{< dropdown >}}
title = 'With a title'
body = 'And some content!'
{{< /dropdown >}}

{{< dropdown >}}
title = 'With a title and icon'
icon = 'fa-solid fa-lock-open'
body = 'And some content and an icon!'
{{< /dropdown >}}

{{< dropdown >}}
title = 'A primary color dropdown'
icon = 'fa-solid fa-lock-open'
color = 'primary'
body = 'And some content and an icon!'
{{< /dropdown >}}

{{< dropdown >}}
title = 'A secondary color dropdown'
icon = 'fa-solid fa-eye'
color = 'secondary'
body = 'And some content and an icon!'
{{< /dropdown >}}

{{< dropdown >}}
title = 'A success color dropdown'
icon = 'fa-solid fa-check'
color = 'success'
body = 'And some content and an icon!'
{{< /dropdown >}}

{{< dropdown >}}
title = 'A warning color dropdown'
icon = 'fa-solid fa-exclamation'
color = 'warning'
body = 'And some content and an icon!'
{{< /dropdown >}}

{{< dropdown >}}
title = 'A danger color dropdown'
icon = 'fa-solid fa-exclamation-triangle'
color = 'danger'
body = 'And some content and an icon!'
{{< /dropdown >}}

{{< dropdown >}}
title = 'Open dropdown by default'
icon = 'fa-solid fa-eye'
color = 'info'
open = true
body = 'This dropdown is open by default!'
{{< /dropdown >}}

{{< dropdown >}}
title = 'Fade in animation'
icon = 'fa-solid fa-magic'
animate = 'fade-in'
body = 'This dropdown fades in when opened!'
{{< /dropdown >}}

{{< dropdown >}}
title = 'Fade in and slide down animation'
icon = 'fa-solid fa-chart-line'
animate = 'fade-in-slide-down'
body = 'This dropdown fades in and slides down when opened!'
{{< /dropdown >}}

{{< dropdown >}}
title = 'Using chevron: down-up'
icon = 'fa-solid fa-cog'
chevron = 'down-up'
body = 'Notice the different chevron direction!'
{{< /dropdown >}}

{{< dropdown >}}
title = 'Custom chevron with animation'
icon = 'fa-solid fa-star'
chevron = 'down-up'
animate = 'fade-in'
color = 'warning'
body = 'Combining different features!'
{{< /dropdown >}}

{{< dropdown >}}
title = 'Multi-line content'
icon = 'fa-solid fa-align-left'
body = '''
This is multi-line content.

It can include **markdown** and multiple paragraphs.
And even lists:

- Item 1
- Item 2
- Item 3
'''
{{< /dropdown >}}

{{< dropdown >}}
title = 'Dropdown with code'
icon = 'fa-solid fa-code'
color = 'success'
body = '''
Here's some code inside a dropdown:

```python
def hello_world():
    print("Hello from a dropdown!")
    return 42
```

And more content after the code.
'''
{{< /dropdown >}}

{{< dropdown >}}
title = 'Nested dropdowns'
icon = 'fa-solid fa-folder'
body = '''
This is a dropdown with a dropdown inside it.

{{< dropdown >}}
title = 'Inner dropdown'
icon = 'fa-solid fa-code'
body = '''
I'm inside a dropdown in a dropdown!
'''
{{< /dropdown >}}

And here is some more content after the inner dropdown.
'''
{{< /dropdown >}}

This example renders as:

Dropdown with code

Here’s some code inside a dropdown:

def hello_world():
    print("Hello from a dropdown!")
    return 42

And more content after the code.

`field-list`#

Field lists

{{< field-list >}}
[[entry]]
term = "John"
def = 30

[[entry]]
term = "Will"
def = 28

[[entry]]
term = "Joey"
def = 24
{{< /field-list >}}

This example renders as:

John:: 30
Will:: 28
Joey:: 24

`figure`#

Figures

{{< figure >}}
src = 'https://source.unsplash.com/200x200/daily?cute+puppy'
alt = 'Cute puppies'
height = 200
width = 200
title = 'Figure title'
attribution = 'Figure Credits: Daily cute puppy image from unslash.com'
attributionlink = 'https://source.unsplash.com/200x200/daily?cute+puppy'
caption = '''
A figure is an image with a caption. Figures may also include a tile, legend, and/or attribution.
'''
legend = '''
**TODO: use tomltotable (https://github.com/scientific-python/scientific-python-hugo-theme/pull/548)**

This paragraph is also part of the legend.
'''
{{< /figure >}}

{{< figure >}}
src = 'https://source.unsplash.com/200x200/daily?cute+puppy'
alt = 'Cute puppies'
attribution = 'from unslash.com'
attributionlink = 'https://source.unsplash.com/200x200/daily?cute+puppy'
align = 'left'
height = 150
width = 150
caption = '''
A figure with left alignment.
'''
{{< /figure >}}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This example renders as:

Cute puppies — **Figure title**#
Figure Credits: Daily cute puppy image from unslash.com
A figure is an image with a caption. Figures may also include a tile, legend, and/or attribution.

**TODO: use tomltotable (https://github.com/scientific-python/scientific-python-hugo-theme/pull/548)**

This paragraph is also part of the legend.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

`grid`#

Grids.

{{< grid columns="1 2 3 4" outline="true" >}}

[[item]]
type = ''
body = 'A'

[[item]]
type = ''
body = 'B'

[[item]]
type = ''
body = 'C'

[[item]]
type = ''
body = 'D'

{{< /grid >}}

{{< grid columns="1 2 2 4" >}}

[[item]]
type = 'card'
title = 'Only title'

[[item]]
type = 'card'
body = '''
Only body.

But with multiple text paragraphs.
'''

[[item]]
type = 'card'
title = 'Heading and body'
body = '''
Content of the third card.

{{< badge primary >}}Sample badge{{< /badge >}}
'''

[[item]]
type = 'card'
title = 'A card with a dropdown menu'
body = '''
{{< dropdown >}}
title = 'Click to expand dropdown'
icon = 'fa-solid fa-eye'
body = 'Hidden content'
{{< /dropdown >}}
'''

[[item]]
type = 'card'
header = 'Header'
title = 'Card Title'
body = 'Card content'
footer = 'Footer'

[[item]]
type = 'card'
header = 'A clickable image card'
link = 'https://example.com'
body = '''{{< image >}}
src = 'https://source.unsplash.com/200x200/daily?cute+puppy'
alt = 'Cute puppies'
{{< /image >}}'''

[[item]]
type = 'card'
classcard = 'text-center'
link = 'https://example.com'
body = '''{{< image >}}
src = 'https://source.unsplash.com/200x200/daily?cute+puppy'
alt = 'Cute puppies'
{{< /image >}}

A clickable figure card'''

[[item]]
type = 'card'
link = 'https://example.com'
body = '''{{< image >}}
src = 'https://source.unsplash.com/200x200/daily?cute+puppy'
alt = 'Cute puppies'
{{< /image >}}'''
footer = 'A clickable figure card'

{{< /grid >}}

{{< grid columns="2 2 2 2" >}}

[[item]]
type = 'card'
columns = "auto auto auto auto"
body = 'A'

[[item]]
type = 'card'
columns = "12 6 6 6"
body = 'B'

[[item]]
type = 'card'
columns = "12 12 12 12"
body = 'C'

{{< /grid >}}

This example renders as:

Only title

Only body.

But with multiple text paragraphs.

Heading and body

Content of the third card.

Sample badge

A card with a dropdown menu

Header

Card Title

Card content

Footer

A clickable image card

A clickable figure card

`image`#

Images

{{< image >}}
src = 'https://source.unsplash.com/200x200/daily?cute+puppy'
alt = 'Cute puppies'
{{< /image >}}

A clickable image:

{{< image >}}
src = 'https://source.unsplash.com/200x200/daily?cute+puppy'
alt = 'Cute puppies'
target = 'https://unsplash.com/'
height = 200
width = 200
{{< /image >}}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

{{< image >}}
src = 'https://source.unsplash.com/200x200/daily?cute+puppy'
alt = 'Cute puppies'
align = 'right'
height = 200
width = 200
loading = 'lazy'
{{< /image >}}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This example renders as:

A clickable image:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

`include-code`#

Include a file with syntax highlighting.

{{< include-code "example.py" "python" >}}

This example renders as:

def foo(x):
    return x**2

`include-html`#

Include an HTML file. The filename is specified relative to the root path.

{{< include-html "static/example.html" >}}

This example renders as:

This is some example HTML with italic and bold text.

`include-md`#

Render and include a markdown file.

{{< include-md "example-markdown.md" >}}

This example renders as:

This is some example markdown with bold!

`include-raw`#

Include a file as-is.

{{< include-raw "data.txt" >}}

This example renders as:

This is the content of data.txt.

`sidebar`#

Create sidebars

{{< sidebar title="Ch’ien / The Creative" >}}
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
{{< image >}}
src = 'https://source.unsplash.com/200x200/daily?cute+puppy'
alt = 'Cute puppies'
align = 'center'
{{< /image >}}

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
{{< /sidebar >}}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.

This example renders as:

`tabs`#

A tabs panel.

{{< tabs >}}

[[tab]]
name = 'c++'
content = '''
An example program in C++:
```c++
int main(const int argc, const char **argv) {
    return 0;
}
```
It simply returns 0, indicating no errors.
'''

[[tab]]
name = 'python'
content = '''
An example program in Python:
```python
def main():
    return True
```
It returns `True`, indicating no errors.
'''

{{< /tabs >}}

This example renders as:

An example program in C++:

int main(const int argc, const char **argv) {
    return 0;
}

It simply returns 0, indicating no errors.

An example program in Python:

def main():
    return True

It returns True, indicating no errors.

`toctree`#

Shows a table-of-contents tree for the Hugo Sections in the current hierarchy. In this documentaion, an example of the toctree is seen on the Examples page.

{{< toctree >}}

On this page

Shortcodes

admonition#

badge#

button#

card#

details#

dropdown#

field-list#

figure#

grid#

image#

include-code#

include-html#

include-md#

include-raw#

sidebar#

tabs#

toctree#

`admonition`#

`badge`#

`button`#

`card`#

`details`#

`dropdown`#

`field-list`#

`figure`#

`grid`#

`image`#

`include-code`#

`include-html`#

`include-md`#

`include-raw`#

`sidebar`#

`tabs`#

`toctree`#