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.

Another one of those features that gets asked for a lot (much like indentation settings, which we just released) is code folding. No kidding:

Meaning, the ability to visually collapse a section of code. The code is still there and executes as expected, you can just temporarily visually hide it so it's not taking up screen real estate and mental space.

It works through little triangles in the gutter along the left. Click them to collapse a bit of code (e.g. everything within the opening and closing brackets in CSS). Click them again to open it (or click the character symbol it collapses to).

Don't like it? Turn it off!

For the first time, we're offering control over editor settings of this ilk. If you're prefer not to have code folding enabled, head to your editor settings and uncheck the option for Code Folding.

Turn on and off other editor settings

You now have the option to turn on and off other editor behavior:

  • Code Wrapping: Lines of code longer than the width of the editor will wrap down to the next line if this is on. Or, keep expanding horizontally forever (with horizontal scrollbars) if turned off.
  • Code Folding: As we just covered.
  • Line Numbers: The numbers along the gutter on the left of the editors. Turning off gives you a bit more space.
  • Match Brackets: Brackets of any kind, parenthesis, quotes, etc. get auto-matched. For instance, type an open paren and you'll get the closing one automatically. Turn this off if you don't want that.

My personal favorite is to have them all turned on except for line numbers. I generally just don't find those useful and not having them frees up a little room.

These settings don't affect code

And so they only apply to you and your editor experience. You can't, for instance, share a Pen with a friend with code folding turned off. Code folding will be on or off depending on your friend's preference, or in case they are logged out, the defaults (all on).

The settings that do affect code (for instance, indentation level) are ultimately Pen-level settings, and thus travel with the Pen and override user settings.