Right at the inception of CodePen we knew that we wanted to improve the experience of sharing code anywhere on the internet. As a writer of quite a few tutorials I have long wished for a way to embed code samples that went beyond just a blob of code that runs the risk of making reader’s eyes glaze over or give up in frustration.

Enter the CodePen embed! While viewing any saved Pen, you’ll see a “Share” button in the header. The code labeled “Embed” is the code you can copy and paste.

The tabs below it: HTML, CSS, JS, and Result indicate which code you:

  • Want to show by default.
  • Want to be a part of the content of the post.

Before we go on, here’s an example of an embedded Pen by Joshua Hibbert:

See the Pen Single Element Pure CSS MacBook Pro by Joshua Hibbert (@joshnh) on CodePen.

If you are viewing this on the CodePen blog directly, you’ll see an embedded iframe that, by default, shows the CSS Joshua used to create that demo. You can use the tabs at the top of the embed to flip over to the finished result or the HTML used. Notice there is no JS, because no JS was used in this Pen. If Joshua were to have used, for example, Sass, the label would be marked as such.

If you are reading this through syndication (your favorite RSS reader) the context isn’t lost. You’ll see the actual CSS code Joshua used in this demo. What you actually embed is a <pre> tag with all that actual content in it. That gets replaced on-the-fly by a bit of JavaScript, turning it into the fancy CodePen embed.

Gracefully degrading code embeds! Extra useful, proven-to-be-working interactive code samples in your blog posts PLUS that make sense for your RSS and otherwise syndicated content.

Let us know what you think, if you find any bugs, or how they work for you.