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:

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

AND You Will Get…….

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

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,

li*5 (Then press TAB as Before)

And We Will Get…..

<li></li><li></li><li></li><li></li><li></li>

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.

li.item$*3 (Press TAB as Always)

And We Will Get…

<li class="item1"></li><li class="item2"></li><li class="item3"></li>

Note: Multiple ‘$’ characters in a row are used as zero padding, i.e.: li.item$$$ → li.item001
Lets try this:

 li.item$$$*3 (Tab Again..)

And We will Get…

<li class="item001"></li><li class="item002"></li><li class="item003"></li>

and So on…… Lots of possibilities here..

Ex-4 Assigning class and id both together

div#page.section.main

And we will get…

<div id="page" class="section main"></div>

Ex-5: Custom Attributes
lets try this…

td[colspan=2]

And we will get….

<td colspan="2"></td>

Ex-6: Abbreviation groups with unlimited nesting
Lets try this…

div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer

And we will get..

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

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…

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

And we will get…..

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

Regards
Kushal Likhi
Intelligrape Softwares