You've probably seen embedded Pens before. They're a quick way to share a Pen on another site (or in a post, like this one), here's a super basic one:

You can use the Embed Theme Builder to tweak how they look. There are some built-in themes but you can also make your own, allowing you to customize everything from the tab colors to the syntax highlighting (you can use any of the themes that are available in the Pen editor). Here's an example using DuoTone Dark:

If you're a PRO user you can even use your own CSS. That opens up a bunch of possibilities— maybe you want to match the button styling or fonts to your personal site. Maybe you want to hide the CodePen branding in favor of your own. You get the idea.

You can take it a step further, though— syntax highlighting is also handled with CSS! If you were to make your own theme for CodeMirror (the open-source text editor CodePen is built around), there's nothing stopping you from using it in an embedded Pen.

Here's how that might look1:

Writing CodeMirror themes by hand kinda sucks, so I built a GUI to help. You can export anything you make by clicking the "Export CSS" button on the top right. As an added bonus, if you use Chrome you can export your themes as JSON and use 'em right in the CodePen editor via Codepen Enhancement Suite.

Happy theming!


1. The weird .embed-scope.embed-scope, :not(.embed-scope) selector is just to get things to work correctly both inside the Embed Theme Builder and in the wild. You technically don't need it, but your theme won't show up within the embed builder if you omit it.


688 0 6