We offer four different HTML preprocessors that you can use while creating and editing Pens on CodePen: Markdown, HAML, Slim, and Jade. These can be useful in writing more terse code. Or perhaps you are working on projects in these languages and want to keep your examples consistent. To choose one to write in, click the settings "gear" icon in the header of the HTML code editor. You'll see an options pane like this:
Click on the button of the preprocessor you'd like to use.
Say you've chosen Slim. You could write code like this:
nav ul li a href='#' Home li a href='#' About li a href='#' Clients li a href='#' Contact Us
And it would produce HTML output like this:
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav>
You can see that code yourself by clicking on the title "HTML (Slim)" in the header to give you a compiled preview. Note the output HTML may be compressed.