Hugo Shortcode for asciinema cast #

Embed any casts from asciinema to demonstrate your terminal sessions or any cli app.

Minimal example #

Here is a simple cast recorded with asciinema:

Code:

{{< asciicast id="AyrL49ZCvbvICGRmMT8Q9rz5B" >}}

Full example #

With parameters you can override speed, theme, etc.

Code:

{{< asciicast
    id="AyrL49ZCvbvICGRmMT8Q9rz5B"
    theme="monokai"
    startAt="10"
    speed="3"
    loop=true
    autoplay=true
    columns="90"
    rows="10"
    >}}

Parameters #

Parameter	Default	Description
`id`	—	ID of your cast.
`theme`	—	One of available asciinema themes, full list you can find in asciinema docs.
`startAt`	`0`	The time at which the playback should start.
`speed`	`1`	The speed of cast playback. `2` means 2 times faster.
`loop`	`false`	If true, the cast will be played in a repeat mode.
`autoplay`	`false`	If true, the cast will start automatically, else it will start only after click.
`preload`	`true`	If true, the cast will be prefetched before user interaction.
`columns`	—	The width of cast in symbols. If don’t passed, it will be equal the size of your terminal when you recorded the cast.
`rows`	—	The height of cast in rows.

Site Parameters #

You can set defaults in Site Parameters. For config.toml:

[params.HugoShortcodes.Asciicast]
    Theme = 'monokai'
    Speed = 2
    Loop = true
    AutoPlay = true
    Preload = true
    Columns = 80
    Rows = 25

For config.yaml:

params:
  HugoShortcodes:
    Asciicast:
      Theme: 'monokai'
      Speed: 2
      Loop: true
      AutoPlay: true
      Preload: true
      Columns: 80
      Rows: 25

Installation #

Don’t forget to install shortcode before usage.

Install all shortcodes at once

If you need dozens of them, it’s better to attach this repository as a theme to your website.

First, add the theme as a git submodule:

git submodule add -b theme https://github.com/isqua/hugo-shortcodes.git themes/hugo-shortcodes

Then add the theme to your config.toml. Most likely you have the following line in your config:

theme = 'ananke'

There may be another theme in place of “ananke”.

Then surround the theme with square brackets, and appends 'hugo-shortcodes' with a comma at the end:

theme = [ 'ananke', 'hugo-shortcodes' ]

That’s it! If your hugo server is running, it is better to restart it to avoid unexpected behavior.

Now you can use all the shortcodes on any content page of your site.

Install only current shortcode

If you need only one shortcode or installing a theme is too complicated, you may get it easier.

First, download shortcode file.
Put the file into your layouts/shortcodes folder.

That’s it! If your hugo server is running, it is better to restart it to avoid unexpected behavior.

Now you can use the shortcode on any content page of your site.