HTML Preprocessor Output

October 19, 2014

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.

Just a quick note about this!

HTML minification is weird.

If you strip out all whitespace from an HTML document, it can (and probably will) render differently. Inline (and inline-block, inline-table, etc.) elements render a space if there is any whitespace between them in the HTML, but no space if there isn't, which can lead to sometimes subtly different rendering or sometimes totally break a grid layout.

To make things harder, you can't know just by looking at the HTML what is and isn't an inline element because you can set that in CSS.

Plus, the gains from minifying aren't that huge anyway generally with HTML, since the biggest gains are from gzipping anyway.

Plus PLUS, here on CodePen, there isn't a huge need to squeeze out performance drops from the demos you build. It's probably best to have prettified output for readability.

So, when we do HTML preprocessing, we don't do any compression, nor do we run HTML through any other minification process. We try and do a little monkeying with the code you author as possible.

But sometimes you need it!

Let's say you want three list items to output right next each other like:

<li>one</li><li>two</li><li>three</li>

In Haml, you can write that like:

%ul
%li one
%li> two
%li three

In Jade, you can control the output from a comment, like:

// jade: compressed
ul
li one
li two
li three

In Slim, right now, we're automatically compressing the output because that's Slim's default. But we'll probably change that soon to output prettified to match all the other preprocessor, and then I'm not actually sure how you'll do it in Slim.

Not quite sure how to manipulate Markdown like that either, might not be possible without some deep customization that we probably wouldn't dig into unless there was a huge need for it.