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:

html-settings

Click on the button of the preprocessor you'd like to use.

Example

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.

compiled-html