Productivity, Emmet, Zen Coding

We have implemented lots of productivity features into the Codio IDE thanks to Emmet, formerly Zen Coding. These features let you saves considerable time when working with HTML, CSS and Javascript files.

Standard Code Editor Keyboard Shortcuts

General keyboard shortcuts can be found in this section. All other productivity shortcuts are found here in this chapter.

Emmet Keyboard Shortcuts

A set of powerful productivity shortcuts for HTML5, CSS and Javascript.

Abbreviations

Thanks to our Emmet support, you get a large number of HTML and CSS abbreviations that expand to code, a bit like this

1
div>ul>li*3

which expands to

1
2
3
4
5
6
7
  <div>
      <ul>
          <li></li>
          <li></li>
          <li></li>
      </ul>
  </div>

Be sure to check out the complete reference as there are an awful lot of abbreviations for you to take advantage of.