Shortcodes

Hugo loves Markdown because of its simple content format, but there are times when Markdown falls short.

Often, content authors are forced to add raw HTML to Markdown content. Hugo authors think this contradicts the beautiful simplicity of Markdown’s syntax. Hugo created shortcodes to circumvent these limitations.

A shortcode is a simple snippet inside a content file that will be rendered using a predefined template.

Slide shortcode is used to set the title and the slide background.

Format

{{< slide named-parameters >}}

Named Parameters All named parameters are optional.

Defines the title used in menu (default to first heading in the slide). Menu appears when clicking ‘M’ button when presenting slides.

Defines overlay iframe URL.

Defines background with CSS function (e.g. bg=“linear-gradient(#571d96, #398ccb)")

Defines background colour with one of palette color (see Configuration page) or CSS value.

Defines background image URL. Animated GIFs restart when the slide opens.

A single video URL, or a comma separated list of video URL.

Flags if the video should play repeatedly (default to “false”).

Flags if the audio should be muted (default to “false”).

Defines background iframe URL.

Defines background size with CSS value (default to “cover”).

Defines background position with CSS value (default to “center”).

Defines background repeat with CSS value (default to “no-repeat”).

Opacity of the background video on a 0 to 1 scale. 0 is transparent and 1 is fully opaque (default to “1”).

Defines or overrides the title used in menu

Format

{{< menu-title title >}}

Positional Parameters All positional parameters are optional.

Defines the title used in menu.

Renders the playback of Asciinema recorded terminal sessions.

To record terminal session, see Asciinema page

Format

{{< asciinema named-parameters >}}

Named Parameters All named parameters are optional except file that is mandatory.

Defines source URL to load content from

Enables player to automatically start the session (default to “false”)

Playback speed (Defaults to 1 (normal speed) 2 means 2x faster.

Limit terminal inactivity to given number of seconds.

Starts playback at given time in second

Defines the title above the player

Defines the timing in second from where the player previews the frame

Defines the size of the terminal font (default to “small”) Possible values are following

• small
• medium
• big
• any CSS value (e.g. 15px, 1.2em…)

Render boxed text with three distinct box rendering styles: the default, rounded, and waved.

Format without title

{{< box class >}}
content
{{< /box */}}

Format with title

{{</* box class title >}}
content
{{< /box >}}

Positional Parameters All positional parameters are optional.

Defines CSS class to use (if not set default rendering style is used).

Possible values are following:

• rounded used for rounded rendering style
• waved used for waved rendering style

Defines box title.

Renders a chart with given data. Chart.js library is used to render charts.

Format for inline data

{{< chart named-parameters >}}
<!--
JSON-data
-->
{{< /chart >}}

Format for external data

{{< chart named-parameters />}}

Named Parameters All named parameters are optional except type.

Defines chart type. Possible values are following:

• line
• bar
• horizontalBar
• pie
• doughnut
• radar
• polarArea
• scatter

Defines source URL to load JSON data from See Chart.js documentation and samples.

Renders code-block with optional syntax highlighting. If focus is set, code block is automatically scrolled such that the lines of code to be focused on is centered.

Format for inline source

{{< code named-parameters >}}
source
{{< /code >}}

Format for external source

{{< code named-parameters />}}

Named Parameters All named parameters are optional.

Defines language for syntax highlighting. List of supported languages is available at Highlight.js source code.

Defines source URL to load content from.

Flags if the line numbers are displayed (default to “false”).

Defines focused lines in code block as pipe-separated list of line number and/or lines range. For instance

• “3” to focus line 3
• “1,3,5” to focus lines 1,3 and 5
• “1-5” to focus lines 1 to 5
• “1,7-10” to focus lines 1 and lines 7 to 10

Renders draw.io diagram. For more information, read dedicated page: Draw.io page

Format

{{< drawio named-parameters >}}

Named Parameters All named parameters are optional.

Defines source URL to load content from

Displayed page index (default to 0)

Space-separated list of visible layers (e.g. layers=“0 1”)

Renders a styled quotation with optional attribution.

Format without attribution

{{< quote >}}
content
{{< /quote >}}

Format with attribution

{{< quote attribution >}}
content
{{< /quote >}}

Positional parameters All positional parameters are optional.

Defines quote’s attribution

Types strings using Typed.js.

Enter in any string, and watch it type at the speed you’ve set, backspace what it’s typed, and begin a new sentence for however many strings you’ve set.

Format

{{< typed named-parameters >}}
sentence 1
sentence 2
sentence 3
...
sentence N
{{< /typed >}}

Named Parameters All named parameters are optional.

Defines type speed in millisecond (default to “50”)

Defines time before typing in millisecond (default to “0”)

backspacing speed in millisecond (default to “30”)

Enables only backspace what doesn’t match the previous string (default to “true”)

Enables shuffle the strings (default to “false”)

Defines time before backspacing in millisecond (default to “1000”)

Enables loop strings (default to “true”)

Defines amount of loops (default to “Infinity”)

Shows cursor (default to “true”)

Defines character for cursor (default to “|")

Renders current year.

Format

{{< year >}}

Renders Emoji emoticons by their names.

Format

{{< emoji name >}}

See Emoji Cheat Sheet for available emojis.

Renders FontAwesome brand icons by their names.

Format

{{< fab name >}}

See Brand icons gallery for icon names.

Renders FontAwesome regular icons by their names.

Format

{{< far name >}}

See Regular icons gallery for icon names.

Renders FontAwesome solid icons by their names.

Format

{{< fas name >}}

See Solid icons gallery for icon names.

Modifies colour of a span.

Format

{{< color value >}}

Modifies font size of a span.

Format

{{< size value >}}

Applies style to a flow of element by using CSS classes.

Format

{{< div classes >}}
content
{{< /div >}}

{{< div classes fragment-index >}}
content
{{< /div >}}

Applies style to a text by using CSS classes.

Format

{{< span classes >}}
content
{{< /span >}}

{{< span classes fragment-index >}}
content
{{< /span >}}

Applies style to an ordered list by using CSS classes.

Format

{{< ol classes >}}
content
{{< /ol >}}

Applies style to an unordered list by using CSS classes.

Format

{{< ul classes >}}
content
{{< /ul >}}

Applies style to a list item by using CSS classes.

Format

{{< li classes >}}content{{< /li >}}

{{< li classes fragment-index >}}content{{< /li >}}

Play sound when slide is showing. Supported format are OGG, MP3, WAV.

Example

{{< audio src="url" >}}

Image could be inserted with Markdown syntax, but it can’t be resized.

Format {{< img named-parameters >}}

Named Parameters All named parameters are optional.

Defines image URL

Defines alternative and hover text

Defines image width

Defines image height

Defines CSS class

Defines CSS style

Defines caption text

Defines CSS class for caption text

Example

{{< img src="url" height="600" >}}

Play video when slide is showing.

Format

{{< video named-parameters >}}

Named Parameters All named parameters are optional.

Defines video URL

Enables video autoplay when slide is displayed (default to “true”)

Defines video width

Defines video height

Displays video controls (default to “true”)

Defines CSS class

Defines CSS style

Example

{{< video src="url" height="600" >}}

Embed a web page within the slide.

Example

<iframe height="600" src="url"></iframe>

By adding following on top of the slide, embedded web page can be

• refreshed on slide load
• and periodically refreshed.

In order to refresh only on slide load, set rate_in_ms to 0.

<!-- .slide: data-iframe-refresh="iframe_id[:rate_in_ms]" -->

data-iframe-refresh parameter consists on the id of the iframe iframe_id and an optional refresh period rate_in_ms. The default refresh rate is equal to 5000 ms.

Example

<!-- .slide: data-iframe-refresh="foo" -->
<iframe id="foo" height="600" src="url"></iframe>