Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

When you use our Embedded Pens feature, the code that is shown is in the language you authored it in. Write in Haml, we’ll show the Haml. Write in Stylus, we’ll show the Stylus. Write in regular CSS, we’ll show the regular CSS.

Now, if you’ve chosen to write in a preprocessor language, we will show that by default but also display a button you can click to also see the compiled HTML, CSS, or JavaScript.

Check it out:


This is useful if the person looking at your Pen doesn’t understand or care for what you’ve written it in. No big deal, they can just check out the compiled source. It is also useful when you’re specifically writing about a preprocessor and the before/after of the code is very relevant.

You’ll also notice a “Rerun” button, which completely refreshes the preview. This is nice for animated Pens that otherwise run once and stop, or any other reason where a complete refresh is useful.

PRO Users

These new features are available for all users and are now in all embedded Pens by default. If you need to hide them or change their appearance, the only way to do so is through Custom CSS via an Embed Theme, which is only available to PRO users. PRO users also get Unlimited Embed Themes, meaning you have different styles for your embeds that match as many different sites as you wish.