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.

include-html

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

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

This example renders as:

include-md

Render and include a markdown file.

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

This example renders as:

include-raw

Include a file as-is.

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

This example renders as:

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:

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:

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:

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: