We offer four different HTML preprocessors that you can use while creating and editing Pens on CodePen: Markdown, Haml, Slim, and Pug. 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 select an HTML preprocessor for your Pen, click the settings “gear” icon in the header of the HTML code editor. That will open the settings panel for your Pen, with the HTML tab pre-selected, like this:

Choose the preprocessor you’d like to use from the dropdown menu, then close the settings panel.

Example

Say you’ve chosen Pug. You could write code like this:

nav
    ul
        li
            a(href='#0') Home
        li
            a(href='#0') About
        li
            a(href='#0') Clients
        li
            a(href='#0') 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 “View Compiled HTML” button in the header to give you a compiled preview. Click the “View Uncompiled HTML” button again to toggle back to the editor.

---

Here’s an Embedded Pen that uses Pug:

What versions of processors do you run?

See our Versions page.