Support for zen-coding library in Spider

Zen-coding is a JavaScript library originally created by Sergey Chikuyonok and currently being developed under an MIT license. The premise of the developers of this library was to make it easier and faster for web authors to create code using (x)HTML, CSS, XML or any other structured code format. The basic function of the zen-coding library is a mechanism of unfolding shortcodes, which can be written quickly, into large code structures. For example, typing the following code:

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

and calling the code development command, will cause the above shortcut to be replaced by the code:

<div id="page">
        <div class="logo"></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>

The shortcut mechanism has a modular structure, which makes it possible to develop code in different languages. Currently zen-coding supports CSS, HTML, XML/XSL and HAML languages. With zen-coding syntax and examples of shortcodes can be found at the bottom of the page.

Current features of the zen-coding shortcodes unfolding mechanism

• ID and CLASS attributes: e.g. div#page.section.main
• User attributes: e.g. div[title], a[title="Hello world" rel], td[colspan=2]
• Duplicating elements: For example, li*5 will result in a <li> tag duplicated five times.
• Numbering elements using the '$' character: for example, li.item$*3 will result in a <li tag> a tag duplicated three times, and the character '$' will be replaced with the item number.
• Repeated use of the '$' character aligns the number with zeros: for example, li.item$$$ will give out the same as li.item001/li>
• Infinite nested shortcut grouping: e.g. div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer. You can literally save the entire document in one line of code with a shortcut!
• Filter support (more about filters on zen-coding)
• You can skip writing a div tag when the hash element starts with ID or CLASS: e.g. #content>.section results in the same result as div#content>div.section

Zen-coding is not only a mechanism for unfolding shortcodes. The library also offers extremely useful actions for web developers like: covering text with code developed from shortcodes, collapsing tags, commenting code, removing tags, etc. Spider, on the other hand, is one of the few code editors that fully support the Zen-Coding library!

Using the zen-coding library in Spider

Full support for all zen-coding features is offered by a small number of programs, and Spider is among this group, offering the following zen-coding commands (in parentheses are the default keyboard shortcuts, which can be modified in the keyboard shortcut settings window):

• Expand shortcode (Alt+E)
• Embrace with an expanded shortcut (Ctrl+Alt+W)
• Corresponding tags backward (Alt+Up arrow)
• Corresponding tags forward (Alt + Down Arrow)
• Go to the edit area forward (Alt+Right arrow)
• Go to the edit area backwards (Alt+Left arrow)
• Remove tag (Alt+Del)
• Merge rows (Alt+M)
• Abbreviated/expanded tag (Alt+J)
• Comment (Alt+K)
• Corresponding tags (Alt+P)
• Select whole row (Alt+L)

These commands are also available from the Tools menu / Zen-coding Commands and from the Frequently used toolbar.

Now a simple example of using zen-coding in Spider. First quite complicated to see all the magic So please open a new blank document and paste the following code in it:

table+

After pasting this text, please place the text cursor at the end (after the footer) and call the command "zen-coding: Expand Shortcut" from the Tools / zen-coding commands menu, or run this command with the keyboard shortcut ALT+E. As a result, the entered shortcut will expand to the form:

<table>
 <tr>
  <td></td>
 </tr>
</table>

And now a more complicated, sort of magical example of how zen-coding speeds up coding. Let's type the following in the editor:

About me
My Pages
News
Blog
Contact

Next, let's use the function of covering the expanded shortcut. Let's select all the text typed above and run the command to cover the selected text with an expanded shortcut using the above menu or keyboard shortcut (CTRL+ALT+W). A window will be displayed where you need to enter a shortcut. Enter the abbreviation in this window, for example:

div#header>ul#navigation>li.item$*>a>span

and click the OK button. As a result, the following content will be created, and the cursor will be positioned at a convenient place to enter the URL for the first menu item!

<div id="header">
  <ul id="navigation">
    <li class="item1"><a href=""><span>About me</span></a></li>
    <li class="item2"><a href=""><span>My pages</span></a></li>
    <li class="item3"><a href=""><span>News</span></a></li>
    <li class="item4"><a href=""><span>Blog</span></a></li>
    <li class="item5"><a href=""><span>Contact</span></a></li>
  </ul>
</div>

These are just two simple examples regarding HTML. More examples can be found below, in the description of zen-coding shortcut syntax. In addition to HTML, zen-coding allows CSS, XML code expansion, and Spider automatically toggles the way zen-coding works, based on the currently edited document type or block the cursor is in, such as in a CSS code or XML document. For example, in a CSS document or in a block, expanding the code: fl:l|fc will generate the code: float: left;

The source code for the zen-coding library used by Spider can be found in the Settings/zen-coding directory in the file ispidey_zencoding.js.

Zen-coding syntax and examples

Syntax: E#name

Example: div#name
Result: <div id="name"></div>

Syntax: E.name

Example: div.name
Result: <div class="name"></div>

Example: div.one.two
Result: <div class="one two"></div>

Example: div#name.one.two
Result: <div id="name" class="one two"></div>

Syntax: E>E

Example: head>link

Result:
<head>
    <link/>
</head>

Example: table>tr>td

Result:
<table>
<tr>
    <td></td>
</tr>
</table>

Example: ul#name>li.item

Result:
<ul id="name">
    <li class="item"></li>
</ul>

Syntax: E+E

Example: p+p

Result:
<p></p>
<p></p>

Example: div#name>p.one+p.two

Result:
<div id="name">
    <p class="one"></p>
    <p class="two"></p>
</div>

Syntax: E[attr]

Example: p[title]
Result: <p title=""></p>

Example: td[colspan=2]
Result: <td colspan="2"></td>

Example: span[title="Hello" rel]
Result: <span title="Hello" rel=""></span>

Syntax: E|filter

Example: p.title|e
Result: <p class="title"></p>

Syntax: E*N

Example: p*3
Result:
<p></p>
<p></p>
<p></p>

Example: ul#name>li.item*3
Result:
<ul id="name">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>

Syntax: E*N$

Example: p.name-$*3
Result:
<p class="name-1"></p>
<p class="name-2"></p>
<p class="name-3"></p>

Example: select>option#item-$*3
Result:
<select>
    <option id="item-1"></option>
    <option id="item-2"></option>
    <option id="item-3"></option>
</select>

Syntax: E+

Example: ul+
Result:
<ul>
    <li></li>
</ul>

Example: table+
Result:
<table>
<tr>
    <td></td>
</tr>
</table>

Example: dl+
Result:
<dl>
    <dt></dt>
    <dd></dd>
</dl>