Zen Coding Easy and fast HTML writing

Zen Coding Easy and fast HTML writing

Zen Coding It is a text editor plugin. In a text editor using Zen Coding, you can use short codes to write regular HTML codes. This tool greatly simplifies HTML writing.

For example, the following HTML code:

Copy code
The code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
<div id="header">
<div id="logo"></div>
<ul id="nav">
<li class="item-1"><a href=""></a></li>
<li class="item-2"><a href=""></a></li>
<li class="item-3"><a href=""></a></li>
<li class="item-4"><a href=""></a></li>
<li class="item-5"><a href=""></a></li>
</ul>
</div>
</body>
</html>

With Zen Coding, it’s just one line:

Copy code
The code is as follows:

html:xt>div#header>div#logo+ul#nav>li.item-$*5>a

Here is the online DEMO (If the shortcut keys do not work, please check for possible shortcut key conflicts. For example, Sogou input method will occupy "Ctrl+,")

Zen Coding's abbreviation rules are somewhat similar to CSS selectors:

  • id and class: For example, div#main.list.item means <div id="main" class="list item"></div>
  • Other attributes can be: div[title], a[title="Hello world" rel], td[colspan=2]
  • Repeating elements: li*3 will output 3 <li></li>
  • Repeating element numeric sequence: li.list-$$*2 will be expanded to <li class="list-01"></li><li class="list-02"></li>. When multiple $ are put together, the leading $ will be used as 0 to fill the digits.
  • You can use brackets to group: div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer
  • Filters Support, using different parameters will get completely different results

Other main features

Default except HTML /XML/XSL/ CSS In addition to the HAML abbreviation, Zen Coding also provides some other functions that facilitate code writing. .

Abbreviated Package (Wrap with Abbreviation).

Depending on the cursor position or text selection, enter the code abbreviation to get the desired final code.

Copy code
The code is as follows:

You walk into the room
With your pencil in your hand
You see somebody naked
And you say, Who is that man?
You try so hard
But you don't understand
Just what you'll say
When you get home
Because something is happening here
But you don't know what it is
Do you, Mister Jones?

The above text is wrapped with "ul>li*>span" to get the following code:

Copy code
The code is as follows:

<ul>
<li><span>You walk into the room</span></li>
<li><span>With your pencil in your hand</span></li>
<li><span>You see somebody naked</span></li>
<li><span>And you say, Who is that man?</span></li>
<li><span>You try so hard</span></li>
<li><span>But you don't understand</span></li>
<li><span>Just what you'll say</span></li>
<li><span>When you get home</span></li>
<li><span>Because something is happening here</span></li>
<li><span>But you don't know what it is</span></li>
<li><span>Do you, Mister Jones?</span></li>
</ul>

Tag Matching (Balance Tag)

ZC (Zen Coding) provides a quick way to select all the contents within an element

Edit Points (Edit Point)

The code extended by ZC has no content. This function can quickly locate the content editing point.

edit points

at last

Common IDEs such as Eclipse/Aptana, Notepad++, TextMage, Dreamweaver, UltraEdit, Visual Studio, etc. already have official or third-party plug-in support. In fact, since the core code of Zen Coding has two language versions, Javascript and Python, after introducing the corresponding JS file, Zen Coding can be used in the text editing area of ​​the browser.

<<:  SVG+CSS3 to achieve a dynamic wave effect

>>:  JavaScript to achieve JD.com flash sale effect

Recommend

A detailed discussion of components in Vue

Table of contents 1. Component Registration 2. Us...

Detailed explanation of the two modes of Router routing in Vue: hash and history

hash mode (default) Working principle: Monitor th...

Detailed explanation of JavaScript's garbage collection mechanism

Table of contents Why do we need garbage collecti...

How to install vncserver in Ubuntu 20.04

Ubuntu 20.04 has been officially released in Apri...

Analyze several common solutions to MySQL exceptions

Table of contents Preface 1. The database name or...

Oracle deployment tutorial in Linux environment

1. Environment and related software Virtual Machi...

Summary of important components of MySQL InnoDB

Innodb includes the following components 1. innod...

Detailed explanation of MySQL database Event scheduled execution tasks

1. Background As the project's business conti...

Ubuntu installs multiple versions of CUDA and switches at any time

I will not introduce what CUDA is, but will direc...

How to implement mask layer in HTML How to use mask layer in HTML

Using mask layers in web pages can prevent repeat...

Detailed explanation of axios encapsulation and API interface management in React project

Table of contents Preface Install Introduction Sw...

How to solve the problem of margin overlap

1. First, you need to know what will trigger the v...

Example code for using Nginx to implement 301 redirect to https root domain name

Based on SEO and security considerations, a 301 r...

HTML small tag usage tips

Phrase elements such as <em></em> can ...

How to use ElementUI pagination component Pagination in Vue

The use of ElementUI paging component Pagination ...