Zen Coding in IntelliJ IDEA

26 / Aug / 2011 by Kushal Likhi 2 comments

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 class="classForP"></p>

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


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


And we will get…

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

Ex-5: Custom Attributes
lets try this…


And we will get….

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

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


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>
         <div id="page">
    <div id="footer"></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…


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>

Kushal Likhi
Intelligrape Softwares

Tag -


comments (2)

  1. Teja Kantamneni

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


Leave a comment -