Pankaj ParasharDesigner. Developer. Writer.
Jan 17, 2015

Beautify CSS code using Codepen

Recently, I tweeted about using Codepen to beautify your CSS code. I got few reactions in response asking me to explain the process. The idea is simple —

  1. Copy-paste your compressed code in the CSS section.
  2. Select a pre-processor of your choice that allows you to write native CSS code.
  3. Switch to the compiled version and extract the output.

I’ve also got a GIF version of the above steps,

!(//res.cloudinary.com/dw9fem4ki/image/upload/v1421489236/beautify-css_swilwg.gif)[]

Currently, this approach would work with LESS, Stylus and Scss. It obviously wouldn’t work with the indented syntax version of Sass, simply because it doesn’t consider the CSS syntax as valid. Unfortunately, this approach doesn’t work for other languages like HTML and JavaScript.

Although, Markdown supports HTML tags, the compiled version does not beautify the HTML tags.

This hidden feature can take Codepen a notch higher and bring it very close to fully functional code editor.