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 press the green "Save & Close" button at the bottom of the panel to save your selections.


Say you've chosen Slim. You could write code like this:

            a href='#' Home
            a href='#' About
            a href='#' Clients
            a href='#' Contact Us

And it would produce HTML output like this:

    <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>

You can see that code yourself by clicking on the "View Compiled" button in the header to give you a compiled preview. Note the output HTML may be compressed. Click the "View Compiled" button again to toggle back to the editor.