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:
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:
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!
YouTube: video from a page
video-page.md
.