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
Thanks for the nice article… Actually I use this feature a lot… But I learnt a couple of new tricks especially $ tricks… Thanks again for sharing….
Thanks for sharing this. This saves lot of typing effort..