Итак, у вас есть сайт, собранный на генераторе статических страниц hugo. И в один прекрасный момент возникает желание (а возможно и необходимость) интегрировать код с известного ресурса codepen.io. Сделать это намного легче, чем можно подумать.

Создаем новый файл /layouts/shortcodes/codepen.html, в котором размещаем следующий код:

{{/* DEFAULTS */}}
{{ $user    := "your_username" }}
{{ $height  := 500 }}
{{ $tab     := "result" }}{{/* html|css|js|result */}}
{{ $theme   := "default" }}{{/* default|light|dark */}}

Как Вы заметили, следует указать дефолтные значения для переменных:

1. имя пользователя: user,
2. высота блока (в пикселях): height,
3. Вариант вывода: tab (возможны варианты: result, html, css, js, можно указать несколько значений через запятую),
4. Тема: theme (для бесплатного аккаунта следует выбрать из вариантов: default или 0, dark, light)

Синтаксис шорткода для codepen будет выглядеть так:

{{< codepen id="#####" >}}

Следует помнить, что id - является обязательным параметром и не имеет значения по умолчанию.

Пример:

Спасибо за внимание.