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.

We’ve long had a feature for cleaning up the indentation of code on CodePen. The problem was it was really hard to find. It was a keyboard command mapped to Shift + Tab – and it only worked in the default key bindings, not if you had Sublime Text or Vim key bindings active.

We always wanted to make that easier, and after the release of configurable indentation, it became even more important to get it done so you could switch between those settings more easily. So, we made it a true button:

You’ll see this button if you’re writing in HTML, CSS, LESS, JavaScript, or ES6 via Traceur.

We’d love to have it work with all of the possible syntaxes, but alas, we just aren’t there yet. We aren’t writing these from scratch, we’re using available dedicated libraries. Right now we’re using JS Beautifier, which, despite the name, does HTML and CSS and well.

Your Indentation Preference

When you Tidy, it does it’s best to indent your code properly at each nested level. This will honor your current indentation choice (e.g. 2-space tabs, 4-space spaces, whatever). This makes it nice when switching code from between those settings. Change the setting, Tidy, all set!

More Than Indentation

Tidy cleans up lots of stuff. If it thinks a statement should be broken up onto multiple lines, it will. Or the opposite… If you single-line CSS for instance, it will push those on to separate lines. We have the settings such that it’s fairly lenient.

The Future

  • We’d love to support all the preprocessor syntaxes. Right now we’re doing this all client-side, so if there is a great tidy script for any of these syntaxes that we’re not offering yet, let us know. This seems like a possibility for SCSS/LESS. Doing it server-side isn’t out of the question either, possibly with this.
  • We’re, on purpose, not exposing configuration for Tidy. At the moment we think that’s too much complication, even though we know it’s desired sometimes.