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

Use of marker tags in CSS list model

This article mainly introduces the ::master pseud...

Implementation of docker-compose deployment project based on MySQL8

1. First, create the corresponding folder accordi...

Detailed explanation of how two Node.js processes communicate

Table of contents Preface Communication between t...

Detailed introduction to logs in Linux system

Table of contents 1. Log related services 2. Comm...

Docker deployment of Flask application implementation steps

1. Purpose Write a Flask application locally, pac...

How to create a table in mysql and add field comments

Directly post code and examples #Write comments w...

Detailed explanation and practical exercises of Mysql tuning Explain tool (recommended)

MySQL tuning Explain tool detailed explanation an...

Native js to implement a simple calculator

This article example shares the specific code of ...

Use CSS to easily implement some frequently appearing weird buttons

background In the group, some students will ask r...

6 interesting tips for setting CSS background images

Background-image is probably one of those CSS pro...

Sample code for implementing DIV suspension with pure CSS (fixed position)

The DIV floating effect (fixed position) is imple...

Detailed tutorial on installation and configuration of MySql 5.7.17 winx64

1. Download the software 1. Go to the MySQL offic...

jenkins+gitlab+nginx deployment of front-end application

Table of contents Related dependency installation...

How to set up automatic daily database backup in Linux

This article takes Centos7.6 system and Oracle11g...

Mysql splits string into array through stored procedure

To split a string into an array, you need to use ...