Codepen Shortcode
So I created a Hugo shortcode to embed Codepens on the page easily.
There are several ways to embed codepens but I opted for the recommended way with uses a paragraph tag with link and style info, a span tag in case the embedded pen doesn’t load and a script tag:
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="RwrdGdg" data-user="Synphod" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/Synphod/pen/RwrdGdg">
SVGs, :target and animation</a> by Syn (<a href="https://codepen.io/Synphod">@Synphod</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
It all looks a bit complicated at first but if we take out most of the inline CSS and break it up a bit it makes more sense.
<p
class="codepen"
data-height="300"
data-default-tab="result"
data-slug-hash="RwrdGdg"
data-user="Synphod"
style="height: 300px;"
>
<span>See the Pen
<a href="https://codepen.io/Synphod/pen/RwrdGdg">
SVGs, :target and animation</a> by Syn (<a href="https://codepen.io/Synphod">@Synphod</a>)
on <a href="https://codepen.io">CodePen</a>.
</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
As the bit between the <span> tags is probably only used if the pen doesn’t load the important parts are the paragraph attributes:
data-height="300"sets the heightdata-default-tab="result"sets which sections are open when the pen loads. I prefer to have just the finished pen and let the user click on the HTML, CSS or JS as they want.data-slug-hash="RwrdGdg"is the important part of the link to the pendata-user="Synphod"obviously the users name which is also part of the pens url.style="height: 300px;"another setting for the height of the embedded pen’s container.
You need both the username and the pen number for this to work. There is also the Pen’s title, author name and link in between the <span> tags. I think this is only required if the embedded Codepen doesn’t load. I deleted all of this and the embedded pen worked fine. However since we already need to grab both the username and pen code these are easy to add here too. I wasn’t bothered by the title so put something generic in instead: This pen.
The url for any pen looks like this:
https://codepen.io/Synphod/pen/RwrdGdg
It contains both bits of key info: username and pen code. The username comes straight after the site address: Synphod here. The pen comes at then end: RwrdGdg in this case.
Additionally the height of the embed is set at 300 pixels. I would be like to be able to choose that myself. So I’ll need a third parameter to set the height. This is in both data-height the style attribute on the first line.
So my Codepen shortcode needs 3 bits of info: username, codepen code number and a height.
When placed into a markdown file it will look like this (using single, HTML, brackets instead of the double ones used here to prevent the shortcode from running):
{{⪡ codepen "Synphod" "RwrdGdg" "800" ⪢}}
The order is important but customizable. I opted for the username first as it’s first in the url, then the Codepen code number as it comes next and finally the height.
To get this info into the shortcode we use {{ .Get 0 }}, {{ .Get 1 }} and {{ .Get 2 }} where the number corresponds to the first, second and third piece of info in inverted commas.
In our shortcode we just paste in the Codepen code and replace the username with {{ .Get 0 }}, the Codepen code number with {{ .Get 1 }} and height figure, ie. 300, with {{ .Get 2 }}.
Finally here is an embedded pen using the shortcode: