Zen Coding in IntelliJ IDEA

Recently i Found this cool thing(Zen Coding) which is also supported by IntelliJ IDEA.

Long story short, Zen Coding is a shorthand notation for writing HTML/CSS, Few Examples are as Follows:

Ex-1 Writing a nested Markup Quickly
Now in IDEA lets open any gsp/html page and write:

[html]
div#mainDivId>p+h1+p.classForP (After Writing this press TAB)
[/html]

AND You Will Get…….

[html]
<div id="mainDivId">
<p></p>
<h1></h1>
<p class="classForP"></p>
</div>
[/html]

Magic…..
The Zen Code string is self explanatory and also easy to desipher after looking at the output.. 😉

Ex-2 Repeating Elements
Now lets try this In gsp/html page,
[html]
li*5 (Then press TAB as Before)
[/html]

And We Will Get…..

[html]
<li></li><li></li><li></li><li></li><li></li>
[/html]
i.e: li is repeated 5 times, hence multiplying with a number ‘n’ repeates it ‘n’ number of times.

EX-3 Assigning variable Id/Classes/anything
Note:Item numbering with $ character: li.item$*3 will output ‘li’ tag three times, replacing $ character with item number.
[html]
li.item$*3 (Press TAB as Always)
[/html]

And We Will Get…
[html]
<li class="item1"></li><li class="item2"></li><li class="item3"></li>
[/html]

Note: Multiple ‘$’ characters in a row are used as zero padding, i.e.: li.item$$$ → li.item001
Lets try this:
[html]
li.item$$$*3 (Tab Again..)
[/html]

And We will Get…
[html]
<li class="item001"></li><li class="item002"></li><li class="item003"></li>
[/html]

and So on…… Lots of possibilities here.. 😉

Ex-4 Assigning class and id both together
[html]
div#page.section.main
[/html]

And we will get…
[html]
<div id="page" class="section main"></div>
[/html]

Ex-5: Custom Attributes
lets try this…
[html]
td[colspan=2]
[/html]

And we will get….
[html]
<td colspan="2"></td>
[/html]

Ex-6: Abbreviation groups with unlimited nesting
Lets try this…
[html]
div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer
[/html]

And we will get..
[html]
<div id="page">
<div id="header">
<ul id="nav">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
<div id="page">
<h1><span></span></h1>
<p></p>
<p></p>
</div>
<div id="footer"></div>
</div>
[/html]

You can literally write a full document markup with just a single line. 🙂 Awesome..

Ex-7: Another Example Incorporating All we learnt 🙂
Lets Try this…
[html]
div#page>div.logo+ul#navigation>li*5>a
[/html]

And we will get…..
[html]
<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>
[/html]

Regards
Kushal Likhi
Intelligrape Softwares