Shortcodes

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 >}}

This example renders as:

`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 >}}

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`#