Zen Coding For Sublime Text 2 (ST2)

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

You need to add package control to ST2 (this will show you how)

Once Package control is installed, you need to use this keyboard shortcut in ST2 to install zend coding. (Ctrl + Shift + p). Type ‘z‘ and select ‘Zen Coding‘. After about 5 seconds zen coding will be installed in ST2.

To use Zen Coding (for some reason I had a really hard time figuring this out… maybe because I was using Zen Coding in Dreamweaver and it has different keyboard shortcuts and it implements Zen Coding directly inside the code). ST2 does it a different way then Dreamweaver. You need to use this keyboard shortcut (ctrl + option + return). When you do this you will see  a box on the bottom of ST2.

When I first installed Zen Coding, I totally missed this box. I was trying to type something like ul>li>a and then I hit ctrl + option + return and nothing worked. I looked online for the shortcut and spent about 2 hours searching for it before I found out it was right before my eyes the entire time (old age is kicking in).

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

If you want to use Zen Coding in ST2, use this keyboard shortcut (ctrl + option + return) and then type in the ‘Enter Koan‘ text box that appears on the bottom of ST2 your Zen Coding code (like this…. ul>li>a). (The keyboard shortcut on PC is ctrl + alt + enter) Once you enter your zen coding shortcuts just press return and your code will be expanded. For something cool type ‘html:5‘ and press return and you’ll see it starts with a simple html5 document. Pretty cool, huh?

Sublime Kickstart (a collection of resources to help you quickly get comfortable with ST2)

26 Replies to “Zen Coding For Sublime Text 2 (ST2)”

  1. Brilliant—thanks.

    This confused me too, having come from Coda, where it works like you describe Dreamweaver working. I think I prefer ST2’s approach… but it might take me a little while to shed my old ways!

  2. I saw Jeffrey Way (nettuts+) using ZenCoding and knew I needed it immediately… but after installing, I couldn’t for the life of me figuring out how to get it working (there’s no menu options!)

    Thanks for sharing!

    1. Glad it helped. I felt the same way and when I figured it out I thought I would share what I learned. Jeffrey has taught me so much. I particularly enjoyed this tutorial of his:
      So many cool tools shown in such a short amount of time. I encourage you to check it out.

    1. I use tab and it triggers the code but many times it doesn’t. The inconsistency is what drives me nuts. I have used Zen Coding in Dreamweaver and it works much better. I think ZC needs a revamp in the Package written for ST2.

  3. ctrl + option + return does nothing (ST2 on OS Lion) and I don’t see a text box at the bottom of the window. Any ideas?

        1. Still didn’t solve it for me I am afraid (also running on OS Lion). For some reason it works for div, but not for div>a. Any ideas?

          (note: you are talking to a noob :) )

          1. No worries, we were all noobs at one point. I think I’ll forever be a noob. Since you are using a Mac your shortcut should be ctrl + option + return. I created a list of shortcuts for mac/pc here: http://kingluddite.com/st2/sublime-text-2-kick-start. If it still isn’t working it might be that you added a plugin with a conflicting shortcut. This link may steer you in a better direction if this is the case: You’ll get it. Just be a good doctor and have lots of patience…

  4. I am just trying out ST2 and couldn´t make ZC runs with the known shortcut from notepad++. It doesn´t take me 2 hours to find your helping hand in the dark, but it was short before. :-) Thank you really much for sharing your knowledge and your experience, 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 missing the really cool thing about ZenCoding in Sublime: the shortcuts are expanded on the screen as you type, so you can experiment and play around with the codes and see them dynamically update right there in the editor. Live ZenCoding if you like. It feels kind of like sculpting HTML – it’s very tactile. 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 introduced syntax highlighting to the codes as you type them. Awesome.

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

    One other thing that I think a lot of people miss, but are actually truly valuable, are the Zen Commands. With the latest version, hit Ctrl+Shift+P and type Zen to see a list of the commands. I swear I must use Ctrl+Shift+T and Ctrl+Shift+N (select between tag and select tag) hundreds of times a day. :-) The “Select Next Item” and “Select Previous Item” commands are also ace. Try ’em. I had to rebind mine to Ctrl+Alt+period and Ctrl+Alt+, for them to work on Windows though. Here’s another example of using Select Next and Previous, along with some Ctrl+D, multi-cursors, and a bit of Ctrl+Shift+T and N: http://screencast.com/t/A4o8SNI7RfR

    Finally, a few useful resources, in case you weren’t already aware:

    http://code.google.com/p/zen-coding/wiki/Actions (out of date – Sublime has improved on these)

  6. Thanks for explaining how to use the expansion, the GitHub was sparse, it showed how it would work, but nothing like press these keys and see magic.

    I am so used to the VIM plugin, it works much more cohesively, same with the Eclipse/Aptana plugin. The type somewhere else and code expands other there is wierd. In VIM you type the compressed

    Ctrl + [Y] and then [,]

    I ended up going back to VIM.

    Thanks for your write up, it was really frustrating not knowing how to make the plugin do magic.

  7. I find this article a little strange. Simply because for my when I type the shorthand and hit tab, it does it’s thing like magic. I’ve never had to use the way you do. I don’t remember setting up custom shortcuts either, but who knows, that was a while back Zen Coding came out for ST2.

  8. I tried to install Zen Coding on a PC and it doesn’t work, I mean, I did the exact passages wrote on the tutorial, installed packages but can’t find on the list of ctrl+ shift+ p. What I have to do?

    1. For PC’s, the shortcut for Zen Coding is ‘ctrl + alt + enter’. (you might want to check out emmet as that is the current use of Zen Coding (and far more powerful!)

Leave a Reply

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