Scientific Python Hugo Theme documentation

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:

`grid`#

Grids.

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

{{</* 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 >}}

{{< /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

A clickable card

Header

Card Title

Card content

Footer

`grid1`#

Grids.

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

[[card]]
title = 'Only title'

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

But with multiple text paragraphs.
'''

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

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

[[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]]
header = 'Header'
title = 'Card Title'
body = 'Card content'
footer = 'Footer'

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

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

[[card]]
link = 'https://example.com'
body = '''{{</* figure
src="https://source.unsplash.com/200x200/daily?cute+puppy"
alt="Cute puppies"
caption="Cute puppies"
>}}'''

{{</* /grid1 >}}

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 laying in the door of a tiny plastic house'
{{< /image >}}

A clickable image:

{{< image >}}
src = 'https://source.unsplash.com/200x200/daily?cute+puppy'
alt = 'Cute puppies laying in the door of a tiny plastic house'
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 laying in the door of a tiny plastic house'
align = 'right'
height = 200
width = 200
{{< /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.

{{< admonition note >}}
For more options, see Hugo embedded [figure shortcode](https://gohugo.io/content-management/shortcodes/#figure).
{{< /admonition >}}

This example renders as:

Cute puppies laying in the door of a tiny plastic house

A clickable image:

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

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.

Note

For more options, see Hugo embedded figure shortcode.

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

`tabs`#

A tabs panel.

{{< tabs >}}

{{< tab "c++" >}}
An example program in C++:
```c++
int main(const int argc, const char **argv) {
    return 0;
}
```
It simply returns 0, indicating no errors.
{{< /tab >}}

{{< tab "python" >}}
An example program in Python:
```python
def main():
    return True
```
It returns `True`, indicating no errors.
{{< /tab >}}

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

`yamlToTable`#

Render YAML to HTML.

{{< yamlToTable >}}
headers:
  - Project
  - Available Packages
  - Download location

format:
  - align: left
  - align: left
  - align: right

rows:
  - columns:
      - "NumPy"
      - |
        Official *source code* (all platforms) and *binaries* for<br/>
        **Windows**, **Linux**, and **Mac OS X**
      - "[PyPi page for NumPy](https://pypi.python.org/pypi/numpy)"

  - columns:
      - SciPy
      - |
        Official *source code* (all platforms) and *binaries* for<br/>
        **Windows**, **Linux** and **Mac OS X**
      - |
        [SciPy release page](https://github.com/scipy/scipy/releases) (sources)<br/>
        [PyPI page for SciPy](https://pypi.python.org/pypi/scipy) (all)

{{< /yamlToTable >}}

This example renders as:

Project	Available Packages	Download location
NumPy	Official source code (all platforms) and binaries for Windows, Linux, and Mac OS X	PyPi page for NumPy
SciPy	Official source code (all platforms) and binaries for Windows, Linux and Mac OS X	SciPy release page (sources) PyPI page for SciPy (all)

`youtube`#

Embed YouTube videos, with foldable captions. The levelOffset parameter can be used to control the depth of the video heading and content. The shortcode can be invoked either with an id attribute, or by specifying page. In the latter case, that page’s preamble should provide youtube_id, title, venue, and date, and its contents act as the video transcript. Remember the closing tag!

{{< youtube id="EmGSSbwdCZQ" class="talk" title="YouTube: Open Data Science" venue="CU Denver Data Science Symposium 2020" author="Stefan van der Walt" levelOffset=3 >}}

Here, I will give a transcript of the whole video, and say some things about it that you cannot know otherwise without watching the **video**.

### But what is it?

This is it!

{{< /youtube >}}

{{< youtube page="video-page" levelOffset=3 >}}{{< /youtube >}}

This example renders as:

YouTube: Open Data Science

Here, I will give a transcript of the whole video, and say some things about it that you cannot know otherwise without watching the video.

But what is it?#

This is it!

Stefan van der Walt

CU Denver Data Science Symposium 2020

YouTube: video from a page

This is the transcript from video-page.md.

Somename of Someone

Venue in preamble

Mar 15, 2022

Shortcodes

admonition#

badge#

button#

card#

details#

dropdown#

grid#

grid1#

image#

include-code#

include-html#

include-md#

include-raw#

tabs#

toctree#

yamlToTable#

youtube#

YouTube: Open Data Science

But what is it?#

YouTube: video from a page

`admonition`#

`badge`#

`button`#

`card`#

`details`#

`dropdown`#

`grid`#

`grid1`#

`image`#

`include-code`#

`include-html`#

`include-md`#

`include-raw`#

`tabs`#

`toctree`#

`yamlToTable`#

`youtube`#