Zen Coding in Editplus 3.50

You may already know Editplus as an excellent text editor software. 2012.11.01, Editplus released a new version 3.50, in this version added one more major feature – Zen Coding.

What is Zen Coding
Zen Coding is an editor plug-in for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plug-in is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code.

For example:

div#content>h1+p

…can be expanded into:

<div id=”content”>

<h1></h1>

<p></p>

</div>

Major feature of Zen coding – Expend Abbreviation

The Expand Abbreviation function transforms CSS-like selectors into XHTML code.
Here is a list of supported properties and operators:

• E
  Element name (div, p);
• E#id
  Element with identifier (div#content, p#intro, span#error);
• E.class
  Element with classes (div.header, p.error.critial). You can combine classes and IDs, too: div#content.column.width;
• E>N
  Child element (div>p, div#footer>p>span);
• E+N
  Sibling element (h1+p, div#header+div#content+div#footer);
• E*N
  Element multiplication (ul#nav>li*5>a);
• E$*N
  Item numbering (ul#nav>li.item-$*5);

Revolutionize Your Business With Generative AI

From product design and software development to virtual agents, content creation, and reporting, GenAI is transforming business. Our AI experts help you unlock GenAI’s full potential and drive growth.

Let’s Get Started

As you can see, you already know how to use Zen Coding: just write a simple abbreviation selector

div#page>div.logo+ul#navigation>li*5>a

and then call the Expand Abbreviation action. It can be expanded into:

<div id=”page”>
<div></div>
<ul id=”navigation”>
<li><a href=””></a></li>
<li><a href=””></a></li>
<li><a href=””></a></li>
<li><a href=””></a></li>
<li><a href=””></a></li>
</ul>
</div>

How does Zen Coding know when it should add default attributes to the generated tag or skip the closing tag? A special file, called zen_settings.js describes the outputted elements. It’s a simple JSON file that describes the abbreviations for each language (yes, you can define abbreviations for different syntaxes, such as HTML, XSL, CSS, etc.). The common language abbreviations definition looks like this:

‘html’: {
‘snippets’: {
‘cc:ie6’: ‘<!–[if lte IE 6]>\n\t${child}|\n<![endif]–>’,
…
},

‘abbreviations’: {

‘a’: ‘<a href=””></a>’,

‘img’: ‘<img src=”” alt=”” />’,

…
}

}

Key Bindings

Ctrl+E                    – Expand Abbreviation
Ctrl+Shift+D       – Match Pair
Ctrl+Shift+A       -Wrap with Abbreviation
Shift+Ctrl+M      -Merge Lines
Ctrl+Alt+]             -Next Edit Point
Ctrl+Alt+[            -Previous Edit Point
Ctrl+Alt+L                            -Go to Matching Pair
Toogle Comment             -Ctrl+/
Split/Join Tag                     -Ctrl+’
Remove Tag                       -Ctrl+Shift+’

Reference

Zen coding demo, http://zen-coding.ru/demo/

Find Editplus from www.editplus.com

Find more detail about Zen coding: http://code.google.com/p/zen-coding/

Zen HTML selectors: http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn

Zen CSS properties: http://code.google.com/p/zen-coding/wiki/ZenCSSPropertiesEn

Zen Coding Filers: http://code.google.com/p/zen-coding/wiki/Filters