shortcodes codepen

Codepen Shortcode

Add the following code to your module list in the config/_default/module.toml file.

[[imports]]
path = "github.com/gethugothemes/hugo-modules/shortcodes/codepen"

Add the following code to your js plugins list in the config.toml file.

[[params.plugins.js]]
link = "https://cpwebassets.codepen.io/assets/embed/ei.js"
attributes = "async"

Add the following script to your theme header.

<script src="https://cpwebassets.codepen.io/assets/embed/ei.js" async></script>

<!-- minimal use -->
{{< codepen QWvKwmq >}}

<!-- extended use -->
{{< codepen id="QWvKwmq" theme="light" height="600" >}}