Zen Coding For Sublime Text 2 (ST2)

If you want to use Zen Cod­ing on ST2 on a Mac, this is what you need to do:

You need to add pack­age con­trol to ST2 (this will show you how)

Once Pack­age con­trol is installed, you need to use this key­board short­cut in ST2 to install zend cod­ing. (Ctrl + Shift + p). Type ‘z’ and select ‘Zen Cod­ing’. After about 5 sec­onds zen cod­ing will be installed in ST2.

To use Zen Cod­ing (for some rea­son I had a really hard time fig­ur­ing this out… maybe because I was using Zen Cod­ing in Dreamweaver and it has dif­fer­ent key­board short­cuts and it imple­ments Zen Cod­ing directly inside the code). ST2 does it a dif­fer­ent way then Dreamweaver. You need to use this key­board short­cut (ctrl + option + return). When you do this you will see  a box on the bot­tom of ST2.

When I first installed Zen Cod­ing, I totally missed this box. I was try­ing to type some­thing like ul>li>a and then I hit ctrl + option + return and noth­ing worked. I looked online for the short­cut and spent about 2 hours search­ing for it before I found out it was right before my eyes the entire time (old age is kick­ing in).

I was doing it wrong. I made this post to save you the pain I went through.

If you want to use Zen Cod­ing in ST2, use this key­board short­cut (ctrl + option + return) and then type in the ‘Enter Koan’ text box that appears on the bot­tom of ST2 your Zen Cod­ing code (like this.… ul>li>a). (The key­board short­cut on PC is ctrl + alt + enter) Once you enter your zen cod­ing short­cuts just press return and your code will be expanded. For some­thing cool type ‘html:5′ and press return and you’ll see it starts with a sim­ple html5 doc­u­ment. Pretty cool, huh?

Sub­lime Kick­start (a col­lec­tion of resources to help you quickly get com­fort­able with ST2)

25 thoughts on “Zen Coding For Sublime Text 2 (ST2)

  1. Brilliant—thanks.

    This con­fused me too, hav­ing come from Coda, where it works like you describe Dreamweaver work­ing. I think I pre­fer ST2’s approach… but it might take me a lit­tle while to shed my old ways!

  2. I saw Jef­frey Way (net­tuts+) using Zen­Cod­ing and knew I needed it imme­di­ately… but after installing, I couldn’t for the life of me fig­ur­ing out how to get it work­ing (there’s no menu options!)

    Thanks for sharing!

    • Glad it helped. I felt the same way and when I fig­ured it out I thought I would share what I learned. Jef­frey has taught me so much. I par­tic­u­larly enjoyed this tuto­r­ial of his:
      So many cool tools shown in such a short amount of time. I encour­age you to check it out.

    • I use tab and it trig­gers the code but many times it doesn’t. The incon­sis­tency is what dri­ves me nuts. I have used Zen Cod­ing in Dreamweaver and it works much bet­ter. I think ZC needs a revamp in the Pack­age writ­ten for ST2.

  3. ctrl + option + return does noth­ing (ST2 on OS Lion) and I don’t see a text box at the bot­tom of the win­dow. Any ideas?

        • Still didn’t solve it for me I am afraid (also run­ning on OS Lion). For some rea­son it works for div, but not for div>a. Any ideas?

          (note: you are talk­ing to a noob :) )

          • No wor­ries, we were all noobs at one point. I think I’ll for­ever be a noob. Since you are using a Mac your short­cut should be ctrl + option + return. I cre­ated a list of short­cuts for mac/pc here: http://www.kingluddite.com/st2/sublime-text-2-kick-start. If it still isn’t work­ing it might be that you added a plu­gin with a con­flict­ing short­cut. This link may steer you in a bet­ter direc­tion if this is the case: You’ll get it. Just be a good doc­tor and have lots of patience…

  4. I am just try­ing out ST2 and couldn´t make ZC runs with the known short­cut from notepad++. It doesn´t take me 2 hours to find your help­ing hand in the dark, but it was short before. :-) Thank you really much for shar­ing your knowl­edge and your expe­ri­ence, this don´t let my first steps with ST2 come to an abrupt end this afternoon.

    Kind regards,
    Julia :-)

  5. Once you enter your zen cod­ing short­cuts just press return and your code will be expanded.”

    This is miss­ing the really cool thing about Zen­Cod­ing in Sub­lime: the short­cuts are expanded on the screen as you type, so you can exper­i­ment and play around with the codes and see them dynam­i­cally update right there in the edi­tor. Live Zen­Cod­ing if you like. It feels kind of like sculpt­ing HTML — it’s very tac­tile. No need to press return to see the results — you only need to press return when you’re happy with what you’ve got.

    Also, a very recent update has intro­duced syn­tax high­light­ing to the codes as you type them. Awesome.

    I’ve done a kind of lame screen­cast demo to show you what I mean: http://screencast.com/t/Ti8SEzahRJrw

    One other thing that I think a lot of peo­ple miss, but are actu­ally truly valu­able, are the Zen Com­mands. With the lat­est ver­sion, hit Ctrl+Shift+P and type Zen to see a list of the com­mands. I swear I must use Ctrl+Shift+T and Ctrl+Shift+N (select between tag and select tag) hun­dreds of times a day. :-) The “Select Next Item” and “Select Pre­vi­ous Item” com­mands are also ace. Try ‘em. I had to rebind mine to Ctrl+Alt+period and Ctrl+Alt+, for them to work on Win­dows though. Here’s another exam­ple of using Select Next and Pre­vi­ous, along with some Ctrl+D, multi-cursors, and a bit of Ctrl+Shift+T and N: http://screencast.com/t/A4o8SNI7RfR

    Finally, a few use­ful resources, in case you weren’t already aware:

    http://code.google.com/p/zen-coding/wiki/ZenHTMLElementsEn
    http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn
    http://code.google.com/p/zen-coding/wiki/Actions (out of date — Sub­lime has improved on these)

  6. Thanks for explain­ing how to use the expan­sion, the GitHub was sparse, it showed how it would work, but noth­ing like press these keys and see magic.

    I am so used to the VIM plu­gin, it works much more cohe­sively, same with the Eclipse/Aptana plu­gin. The type some­where else and code expands other there is wierd. In VIM you type the compressed

    div.foo>a[href=”#goober”]
    Ctrl + [Y] and then [,]

    I ended up going back to VIM.

    Thanks for your write up, it was really frus­trat­ing not know­ing how to make the plu­gin do magic.

    • I learned about Vim a year ago and recently I have begun using it and prac­tic­ing it. I think Vim with ST2 will be a super pow­er­ful combination.

  7. I find this arti­cle a lit­tle strange. Sim­ply because for my when I type the short­hand and hit tab, it does it’s thing like magic. I’ve never had to use the way you do. I don’t remem­ber set­ting up cus­tom short­cuts either, but who knows, that was a while back Zen Cod­ing came out for ST2.

  8. I tried to install Zen Cod­ing on a PC and it doesn’t work, I mean, I did the exact pas­sages wrote on the tuto­r­ial, installed pack­ages but can’t find on the list of ctrl+ shift+ p. What I have to do?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>