Zen coding– Write web code very quickly

Source: Internet
Author: User

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>

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.