Tab Triggers

HTML Editor

CodePen supports Emmet in the HTML editor when you are using raw HTML (no preprocessor selected). So for example, typing p [TAB] in the HTML will result in <p></p> with the cursor between the tags. You can get a lot fancier as well. Try div#page>div.logo+ul#navigation>li*5>a [TAB]. Also try lorem5, which will give you five words of latin filler text. “5″ can be any positive integer.

In addition to Emmet, we have these custom tab triggers which work when the HTML editor is in any mode:

lorem ➝

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

ul ➝

<ul>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>

ol ➝

<ol>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ol>

nav ➝

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

form ➝

<form action="#">
  <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" placeholder="John Smith" />
  </div>

  <fieldset>
    <legend>Radio Button Choice</legend>

    <label for="radio-choice-1">Choice 1</label>
    <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" />

    <label for="radio-choice-2">Choice 2</label>
    <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
  </fieldset>

  <div>
    <label for="select-choice">Select Dropdown Choice:</label>
    <select name="select-choice" id="select-choice">
      <option value="Choice 1">Choice 1</option>
      <option value="Choice 2">Choice 2</option>
      <option value="Choice 3">Choice 3</option>
    </select>
  </div>

  <div>
    <label for="textarea">Textarea:</label>
    <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
  </div>

  <div>
    <label for="checkbox">Checkbox:</label>
    <input type="checkbox" name="checkbox" id="checkbox" />
  </div>

  <div>
    <input type="submit" value="Submit" />
  </div>
</form>

CSS Editor

CodePen supports Emmet in the CSS editor as well. “Fuzzy search” is the big feature here. There are too many CSS properties and values to remember, so instead of trying to memorize them, try typing the first few letters. For example ov[TAB] will give you overflow: hidden; Try it out on any property.

In addition to Emmet, we support these custom tab triggers:

phark ➝

.element {
  text-indent: -9999px;
  display: block;
  width: px;
  height: px;
  background: url() no-repeat;
}

JS Editor

for ➝

for (var i = 0; i < Things.length; i++) {
  Things[i];
}