Emmet

CodePen supports Emmet.

In HTML, try typing header.main-header>nav>ul.site-nav>li*6>a then pressing TAB. You’ll see that expand into a whole chunk of HTML structure. It’s very useful for things like that, but also very small things, like just pressing em and TAB and getting a single tag with the cursor right inside of it.

In CSS, Emmet supports “fuzzy search”, meaning you can do things like df then TAB and it will expand into display: flex;.

Custom Tab Triggers

CodePen also supports your own snippets for HTML and CSS! You manage them in your Editor Settings, so they work for you on any Pen or Project as long as you’re logged in.

They use Emmet to do the expansion so you can write your expansions in that format. Say you want to type “use” as a tab-trigger, and have it expanded into <use xlink:href=""> as in SVG. Easy. Put “use” as the Snippet and use[xlink:href] as the Output. Here’s some other example in that Emmet format:

Note “myheader” about in how it’s self-referential to another snippet!

Note that by using the Emmet HTML syntax like this, it will expand in whatever HTML preprocessor language is appropriate. For instance, if you have Haml active, header>h1 will expand as

%header
  %h1

Setting the Cursor Position

You can do that like this:

div>{Chris "${1}" Coyier}

You can provide a default value like this:

div>{Chris "${1:CoolPants}" Coyier}

If you wanted to set the cursor position for the value of a class or ID, you’d have to use the square brackets attribute style:

ul[class={$1}]>li*5>lorem10

Regular HTML

If you want to output a bit of HTML without the Emmet syntax, wrap it in curly brackets. That’s how Emmet handles just regular text output, of which HTML is fine:

{<div><h1>Stuff</h1></div>}

Multiple Identical Triggers

You can have multiple snippets trigger the same output. Like if you wanted a tab trigger for a button to be “btn”, “bttn”, or “butt”, you’d make this this trigger:

btn|bttn|butt

New Lines

If you need multiline output for your snippet, add \n to the value, like:

top: 0;\nleft: 0;\nwidth: 100%;\nheight: 100%;

Tabs

If you use the Emmet syntax for your expansion, the output will expand using whatever settings that Pen has active for white space. If you have 3-space spaces set, it will expand with 3-space spaces. If you use tabs, it will expand with tabs. But if you’re inside a curly brace context and need to add space, you’ll have to handle that yourself. Spaces will be honored, and you can use \t for tabs.

Semicolons

CSS output is just like HTML, only there is no special formats you need to worry about. Just add the CSS you want to output (using newlines as needed) and it will output that way.

One thing to know though is you don’t need a semicolon for a single property/value pair, like margin: 0 auto. If you’re in a CSS syntax that uses semicolons, you’ll get it automatically.

Also, don’t start snippets with a ;, as they won’t trigger correctly.