CodePens are a great way to interactively demonstrate a code concept in a blog post. However, I spend more time than I wish to admit googling how to embed a CodePen into my posts, both on Medium and dev.to. Here are the current methods to achieve this on both platforms.

dev.to

Copy the url of your CodePen and add it to a Liquid tag like this:

{% codepen https://codepen.io/claireparker/pen/oMmPPZ %}

Paste the Liquid tag directly into the page. Do not surround it with any other Markdown code formatting tags like the triple or single backticks.

Medium

Press enter for a new line. The plus icon in a circle will appear to the left of the line. Click this and choose the embed option icon, which is the angle brackets like this: <>. Paste the url for your CodePen, then press enter afterwards. Pressing enter is important even if you immediately delete the line, otherwise the CodePen won’t load into the page.

HTML

If your site supports HTML tags, for example on a site using Hugo, Gatsby, Jekyll, etc,, then you can use the HTML that CodePen provides and paste it directly into your page. There is an “Embed” button at the bottom of the screen in the CodePen’s edit view that opens a pop-up, allowing you to customise the panes that are displayed and the size of the CodePen window.

Caveats

On both Medium and dev.to, you can’t customise the panes that appear, change the size of the embedded pen and can only display the “Result” pane. To see the HTML, CSS or JS panes, the user has to click on them to expand them.

Additionally the ability to edit the pen within the embed is only available for paid “Pro” Codepen members. For those on a free account, only the “Result” pane is interactive, and not the HTML, CSS or JS code panes.

Result

And this is what an embedded CodePen looks like in a blog post:

See the Pen Gradient Text by Claire (@claireparker) on CodePen.