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

Vue virtual Dom to real Dom conversion

There is another tree structure Javascript object...

Use crontab to run the script of executing jar program regularly in centOS6

1. Write a simple Java program public class tests...

Textarea text area width and height width and height automatic adaptation implementation code

Copy code The code is as follows: <HTML> &l...

MySQL establishes efficient index example analysis

This article uses examples to describe how to cre...

Vue realizes the sliding cross effect of the ball

This article example shares the specific code of ...

Priority analysis of and or queries in MySQL

This may be an issue that is easily overlooked. F...

Node.js sends emails based on STMP protocol and EWS protocol

Table of contents 1 Node.js method of sending ema...

MySQL 5.7.24 installation and configuration graphic tutorial

This article shares the installation and configur...

Detailed steps to install MySQL 5.7 via YUM on CentOS7

1. Go to the location where you want to store the...

Solutions for building ping and nfs in embedded Linux development environment

1. Embedded Software Level 1) Bootloader->Boot...

A brief discussion on the font settings in web pages

Setting the font for the entire site has always b...

How to solve the DOS window garbled problem in MySQL

The garbled code problem is as follows: The reaso...

JS implements the rock-paper-scissors game

This article example shares the specific code of ...

Steps to install cuda10.1 on Ubuntu 20.04 (graphic tutorial)

Pre-installation preparation The main purpose of ...

Detailed explanation of React event binding

1. What is In react applications, event names are...