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.

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.

mermaid

Generate diagrams and flowcharts from markdown.

{{< mermaid >}}
graph LR

START[ ]--> |Propose| A[Accept]
A--> |Draft| B[Endorse]
B--> |Recommend| C[Adopt]

click A callback "Steering Committee Action"
click B callback "Core Project Action"
click C callback "Ecosystem Action"

style START fill:#FFFFFF, stroke:#FFFFFF;

{{< /mermaid >}}

This example renders as:


graph LR START[ ]--> |Propose| A[Accept] A--> |Draft| B[Endorse] B--> |Recommend| C[Adopt] click A callback "Steering Committee Action" click B callback "Core Project Action" click C callback "Ecosystem Action" style START fill:#FFFFFF, stroke:#FFFFFF;

notice

Create note, warning, information, and tip notices.

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

{{< notice info >}}
This is information.
{{< /notice >}}

{{< notice warning >}}
This is a warning.
{{< /notice >}}

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

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

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

This example renders as:


🛈  Note
This is a note.
🛈  Info
This is information.
🛈  Warning
This is a warning.
🛈  Tip
This is a tip.
🛈  Mission
This is our mission.
🛈  Values
This is our values.

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