Hugo Shortcode for Codepen #

Embed any pens from Codepen to demonstrate some front-end pieces. Add a caption for clarity.

Minimal example #

Here is a simple embedded iframe with a pen from Codepen:

See the Pen wvrLBPZ by (@isqua) on CodePen.

Code:

{{< codepen id="wvrLBPZ" author="isqua" >}}

Full example #

And this is the same pen in light UI theme, with shown tabs specified, with a specific height, a title, and a caption.

See the Pen Example of native web stack beauty by (@isqua) on CodePen.

Look at this awesome example of native web stack beauty

Code:

{{< codepen
    id="wvrLBPZ"
    author="isqua"
    caption="Look at this awesome example of native web stack beauty"
    title="Example of native web stack beauty"
    height="400"
    theme="light"
    tab="html,result"
    >}}

Parameters #

Parameter	Default	Description
`id`	—	ID of your pen. You can get it from the URL of the pen
`author`	—	Username of an author on the Codepen
`height`	`300`	The height of the iframe with UI elements, not only your content
`theme`	`"default"`	Codepen UI theme. May be `light`, `dark` or `default`
`tab`	`"result"`	Tab or two which is shown by default. Possible values are: `result`, `html`, `css`, js`or two of them separated by comma, like this:`html,result`
`caption`	—	A caption to show under the pen
`title`	`caption` if specified, otherwise `id`	Pen title to show when the iframe is not loaded yet

Site Parameters #

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

[params.HugoShortcodes.Codepen]
    Author = 'your_login_on_codepen'
    Theme = 'light'
    Height = '300'

For config.yaml:

params:
  HugoShortcodes:
    Codepen:
      Author: "isqua"
      Theme: "light"
      Height: 300

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.