We’re deep in development over here at CodePen. Lots of new stuff coming soon that we can’t wait to share. We’re keeping on the Beta label for a bit longer. For now I thought I’d share some little improvements to Embedded Pens that you can use right now.

(As a reminder, you can embed any Pen anywhere else on the web (like your own blog) through copy-and-paste code we provide in the Share dropdown you can see in the Editor view of any Pen. We call them Embedded Pens.)

Change the Height

All you have to do is add a (or change the existing) data-height attribute to the <pre> tag to change the size of the embed on your site. For instance, this piggy looks much nicer (not cut off) when we set it to data-height=”465″ rather than the default 300.


The iframe that ultimate gets put on the page now makes 2 less requests, which should speed it up significantly.

Line Numbers

Code on CodePen has line numbers, so why didn’t the embeds? We don’t know either. Now they do. This is nice for blog posts if you need to refer to a line of code in an embed, now you can do it by name.

Update: Editable embeds have line numbers – non-editable embeds do not. If you really need line numbers on a non-editable embed, contact us, we’ll look into it for you.