sublime text 2 zen coding tutorial:code faster

{ Published by Anirudh - On Saturday, October 27, 2012 - 0 comments }







Zen Coding

What is Zen Coding?

Zen Coding is a fast way to simply your development process. Zen syntax is like a short cut that you can use to write large blocks of code. Essentially, if you use Zen code there is really no use for generic snippets anymore. For example, if you need to write out a navigation ul with 4 li’s you’d normally have to write out and indent everything by hand or use some generic snippet then modify it.
With Zen Coding, to accomplish this, all you would have to do is write this:


ul>li*4>a[href="#"]{Hello}









then press tab, which creates this in Sublime:








<ul>


<li><a href="#">Hello</a></li>


<li><a href="#">Hello</a></li>



<li><a href="#">Hello</a></li>



<li><a href="#">Hello</a></li>



</ul>














Installing Zen Coding in Sublime Text 2



Installing and enabling Zen Coding in Sublime Text 2 requires “Package Control“ , so if you haven't installed it yet then do it right now.



Copy that code given in the above site, press ctrl+` in sublime text which will open a window and paste the code there which will install it.



Okay, now that Package Control is installed…


    

  • press (on Windows) ‘ctrl’ + ‘shift’ + ‘p’ to open package control
    • 

  • in the search box, start typing package (its okay if you misspelled it like me)
    • 















    

  • select ‘Package Control: Install Package’ – wait for packages to populate
    • 

  • then in the search box, start typing Zen Coding
    • 

  • select ‘ZenCoding’ from the list
    • 












Clicking it will intall the package and after restarting you will be able to use zen coding.