Zen coding– Write web code very quickly

Zen coding ignores the editor's automatic prompts and automatic completion, seconds Kill your custom shortcuts or AHK hot strings to intelligently and efficiently shorten input, bringing you the experience of writing a variety of complex and tedious HTML and CSS code in a very fast way.

The following dynamic demo diagram is just a part of its powerful functionality.

Let's start with a complex example: zen-coding can turn such code: Div#header>ul.navigation>li*4>a, into the following HTML code

<div id= "Header" >
<ul class= "Navigation" >
<li><a href= "" ></a></li>
<li><a href= "" ></a></li>
<li><a href= "" ></a></li>
<li><a href= "" ></a></li>
</ul>
</div>

See this familiar grammatical structure, will be a friend of CSS will be surprised scream. The best is the "*4", which generates 4 Li code directly. Yes, Zen coding is such a cow fork thing, Zen coding is divided into Zen HTML and Zen CSS two parts. These two parts of the function are implemented in the form of plug-ins. If you use NetBeans, SlickEdit, Sublime, TextMate, TopStyle, UltraEdit, Webide and IntelliJ idea, Dreamweaver, Aptana Can find the relevant plug-ins on the official download page.

Even if you don't use the editor mentioned above, there is a choice to click on the last link in the download page: Zen coding for <textarea>. This is a web version of Zen coding. After opening the example.html, position the cursor in the text box, and press Ctrl + E to try it.

Web page Shortcut key Description: Ctrl + E: Expand Code CTRL + D: Outward Quick Select block SHIFT + CTRL + D: To quickly select the code block SHIFT + CTRL + A: Enter an abbreviation, automatically expand and surround the selected code CTRL + alt+→: Cursor Smart jump to next edit point (you'll know how thoughtful you are) CTRL + alt+←: Cursor smart jump to previous edit point Ctrl + L: Select one line

Official demo Video: Zen CSS and Zen HTML. In addition, the meaning of the abbreviation see: Zen CSS Properties and Zen HTML Elements, the installation of various plug-ins to see the official wiki.

One last reminder: in the official demo video (HD) outside this wall, there is a demo of the custom abbreviations in the wall view address. Please refer to the official wiki for specific setup procedures.

Download: official website

P.S. Front-end observations have been written in a detailed tutorial Zen coding: Quickly write html/css code