We offer three different HTML preprocessors that you can use while creating and editing Pens on CodePen: Markdown, HAML, and Slim. 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 consistant.
To choose one to write in, click the settings “gear” icon in the upper right 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.