Skip to main content

Development

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);

 

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

 

Tags

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Nick Wang

I am Senior Project Manager located at Perficient China GDC. 16 years in IT industry, growing up from developer, I involved in various development projects as project manager. My interests are Project Managment, Agile Development and some edge Technical knowledge.

More from this Author

Categories
Follow Us
TwitterLinkedinFacebookYoutubeInstagram