Using HTML Preprocessors

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.

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.