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.

Behind the scenes, we upgraded CodeMirror from version 2 to version 3. This required a good bit of coding time, but it was worth it. Here’s a couple of things that are immediately better.

Syntax highlighting for Sass (.sass), CoffeeScript, and Markdown


Editors are now in proper “modes”

So for example, you’ll stay intended 2 spaces while authoring white-space dependent languages.


And little stuff

Like weird scrollbar issues in IE are now fixed.


But the most important thing of all? Now we have the solid foundation we need to keep building out editor features. We wanted to be on the lastest and greatest CodeMirror so our further investments in feature building will serve us all into the future.

Just as a little teaser, one thing we’ve long talked about that would be really neat would be to give you more more useful preprocessor errors. Like showing them inline in the editor, highlighting the error lines, click-to-go-to-error messages, or something along those lines. We wanted to be up to date on CodeMirror before digging into that. So now we can.

And… More Editor Font Control

First, we’ve deprecated some themes. Sorry “Rose Garden” lovers, that was the least popular theme. Maintenance for all of them was too hard, so we trimmed it back to the most popular (and sexiest) ones. These five we will stick with:


We don’t just taketh away though! We giveth:

There is an additional font family option now: Source Code Pro, as well as for the first time, [drumroll], font-size picking: