Embed a Codepen in a Hugo site

Codepens can be easily embedded into hugo posts using a custom shortcode

The syntax looks like this:

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

Github user jorinvo created a repository of shortcodes which includes one for a codepen.

The code looks like this:

{{/* DEFAULTS */}}
{{ $user    := "your_username" }}
{{ $height  := 500 }}
{{ $tab     := "result" }}{{/* html|css|js|result */}}
{{ $theme   := 8862 }}{{/* create on codepen.io */}}


<script
    data-slug-hash="{{ .Get "id" }}"
    data-user="{{ or (.Get "user") $user }}"
    data-height="{{ or (.Get "height") $height }}"
    data-default-tab="{{ or (.Get "tab") $tab }}"
    data-theme-id="{{ or (.Get "theme") $theme }}"
    class='codepen'
    async
    src="//codepen.io/assets/embed/ei.js"
></script>

and it works great. And an example pen is shown below:

Simply create a new shortcode file at /layouts/shortcodes/codepen.html, embed in post as per above, and you’re off to the races.