Adding a Codepen Shortcode to Hugo

Tue, Apr 24, 2018

Shortcodes allow you to add external content to a blog post in a user friendly way. Someone’s tweet, an instagram photo, forms, and so on. Instead of a long ugly snippet of JavaScript, you can paste one line of clean shortcode. Hugo has built in shortcode support, and adding a custom shortcode is super easy.

I thought I would be in trouble when Google found no obvious solution for a Codepen & Hugo shortcode. Fortunately, this git repo had just what I was looking for. As stated in Hugo’s docs on custom shortcodes, simply create a file at layouts/shortcodes/name.html where name is the name of the shortcode you want to add.

Once the name.html file is created, copy the code from the repo above into it an save. Then, simply add a pen your posts with:

{{< pen id="Gflmy" >}}

And that’s it. Nice. Demo below.

Related: Shortcodes execute even when they are wrapped in markdown code tags, or indented with 4 lines. The only way I was able to show how I embed a pen above was to escape was to use </* pen id="Gflmy" */> in between the opening and closing {{}}