Sublime Forum

Where are full instructions to install Zen Coding?

#1

I am trying Sublime Text 2 beta on both Windows and OSX. I’ve seen several bits of instructions on a page, post or thread but never a complete set of instructions for either OS.

I have no experience with Python and it seems that the one instruction that looked promising needed a command “hg” that I do not recognize. I’ve seen other instructions that say I should just copy the files into a folder named “ZenCoding” within “Packages” and then restart the editor. This does not help me either.

Could someone please type out clear instructions from start to finish for ST2

Update - Full Instructions and notes

  1. Go to bitbucket.org/sublimator/sublim … /downloads and download the default “branch” zip file
  2. Extract the zip and rename the folder to ZenCoding
  3. In Sublime use the Preferences > Browse Packages… (OSX) menu item to bring up your packages folder
  4. Drag the ZenCoding folder into the packages folder.
  5. Restart Sublime Text 2
  6. Open or create an HTML, PHP, ASP or other valid files with supported extension. Zen Coding will not work in empty, unsaved document.
  7. Use the following keystrokes to use Zen Coding for Sublime Text 2:
ctrl+space          : expansion
ctrl+alt+shift+h    : set_html_syntax_and_insert_skel(doctype=u'xt')
ctrl+alt+enter      : zen_as_you_type()
ctrl+alt+enter      : wrap_zen_as_you_type()
alt+shift+w         : wrap_zen_as_you_type()

ctrl+shift+j        : run_zen_action(action=u'split_join_tag', profile_name=None)
ctrl+j              : run_zen_action(action=u'merge_lines')

ctrl+alt+9          : run_zen_action(action=u'decrement_number_by_01')
ctrl+9              : run_zen_action(action=u'decrement_number_by_1')
ctrl+alt+shift+9    : run_zen_action(action=u'decrement_number_by_10')
ctrl+alt+0          : run_zen_action(action=u'increment_number_by_01')
ctrl+0              : run_zen_action(action=u'increment_number_by_1')
ctrl+alt+shift+0    : run_zen_action(action=u'increment_number_by_10')

ctrl+alt+shift+=    : run_zen_action(action=u'evaluate_math_expression')

ctrl+alt+shift+m    : run_zen_action(action=u'update_image_size')
ctrl+shift+alt+6    : run_zen_action(action=u'encode_decode_base64')

f1                  : zen_css_mnemonic()
f1                  : zen_css_mnemonic(prop_value=True)

ctrl+shift+a        : run_zen_action(action=u'match_pair_tagname')
ctrl+shift+n        : run_zen_action(action=u'match_pair', direction=u'out', syntax=None)
ctrl+shift+t        : run_zen_action(action=u'match_pair_inward')
ctrl+alt+n          : run_zen_action(action=u'go_to_matching_pair')
ctrl+shift+u        : run_zen_action(action=u'remove_tag')

enter               : run_zen_action(action=u'insert_formatted_newline', mode=u'html')

ctrl+period         : run_zen_action(action=u'next_edit_point')
ctrl+,              : run_zen_action(action=u'prev_edit_point')

ctrl+shift+period   : run_zen_action(action=u'select_next_item')
ctrl+shift+,        : run_zen_action(action=u'select_previous_item')

ctrl+alt+shift+v    : run_zen_action(action=u'reflect_css_value')

ctrl+alt+/          : run_zen_action(action=u'toggle_comment')
#                   : insert_snippet(contents=u' id="$1"')
#                   : insert_snippet(contents=u'id="$1"')

.                   : insert_snippet(contents=u' class="$1"')
.                   : insert_snippet(contents=u'class="$1"')
0 Likes

#2
  1. Go to bitbucket.org/sublimator/sublim … /downloads and download the default “branch” zip file
  2. Extract the zip and rename the folder to ZenCoding
  3. In Sublime use the Preferences > Browse Packages… (OSX) menu item to bring up your packages folder
  4. Drag the ZenCoding folder into the packages folder.
0 Likes

#3

[quote=“buzzomatic”]1. Go to bitbucket.org/sublimator/sublim … /downloads and download the default “branch” zip file
2. Extract the zip and rename the folder to ZenCoding
3. In Sublime use the Preferences > Browse Packages… (OSX) menu item to bring up your packages folder
4. Drag the ZenCoding folder into the packages folder.[/quote]

Thanks for the reply, buzzomatic! Unfortunately, I’ve tried this method several times on both OSes and have no success.

I noticed on both OSes that all the folders within Packages have at least one file with the extension .tmLanguage. In the default “branch” zip file that you pointed to in #1, there’s mostly files with the extension .py but not one file with the .tmLanguage extension.

Am I missing something?

0 Likes

#4

http://screencast.com/t/RTMkRe4oO

See this tutorial … hows workin on a Windows 7

0 Likes

#5

[quote=“sublimeisfine”]I noticed on both OSes that all the folders within Packages have at least one file with the extension .tmLanguage. In the default “branch” zip file that you pointed to in #1, there’s mostly files with the extension .py but not one file with the .tmLanguage extension.

Am I missing something?[/quote]

A .tmLanguage file is used for syntax highlighting. As far as I know, ZenCoding doesn’t add any syntax highlighting so it won’t have any of these files.
Have you tried looking at your console? ctrl+`
When you say you’ve had no success, what do you mean? What are the symptoms?

0 Likes

#6

oriceon, I’m shocked. I have no clue how you are making that work!!

So, I did exactly as you did on your screencast. Even without ZenCoding, html will automatically expand. But, I cannot get the same ul>li*5 to expand using ctrl-e on either OS.

Should ZenCoding show up as an option under Tools>Snippets? I don’t see anything under there either. Check out the screencast to make sure I’m on the right track.

screencast.com/t/x33iruNMm

And yes, I had previously restarted ST2 when I started the screencast.

0 Likes

#7

You have to set syntax to HTML or something else.

In default text edit mode it didn`t work as you expected.

Go to View -> Syntax -> HTML

then type ul>li*5 and hit tab key or ctrl + space.

0 Likes

#8

[quote=“oriceon”]You have to set syntax to HTML or something else.

In default text edit mode it didn`t work as you expected.

Go to View -> Syntax -> HTML

then type ul>li*5 and hit tab key or ctrl + space.[/quote]

Got it! I completely overlooked where sublimator said the keystrokes for expansion and as you type. I’m so used to ctrl-e for expansion since I use it all the time for both Coda and Notepad++ so this wasn’t obvious to me.

Thanks for the help!

0 Likes

#9

These steps work perfectly for me and I followed the example listed. I am using Windows 7 32-bit Professional.

If auto-formatting is ever added, it will be the best $59USD ever spent.

Great tool and the development seems to be steady - keep up the good work.

0 Likes

#10

Or you could just install the package control plugin http://wbond.net/sublime_packages/package_control

Then use the “install package” command and select zen coding.

This way it will auto update too.

0 Likes

#11

[quote=“firefusion”]Or you could just install the package control plugin http://wbond.net/sublime_packages/package_control

Then use the “install package” command and select zen coding.

This way it will auto update too.[/quote]

Unfortunately sublimator has disappeared from this forum and his repositories have disappeared from BitBucket.

Perhaps someone has a checkout of ZenCoding and wishes to take over maintenance? I presume the license allows for that, but I don’t recall what it is, off of the top of my head.

0 Likes

#12

I really need the files to add zen to sb2 :frowning:

0 Likes

#13

Uh…it is not possible to download from here: bitbucket.org/sublimator/sublim … /downloads

“Error
Access denied” :frowning:

0 Likes

#14

ZenCoding is now available again via Package Control. wbond.net/sublime_packages/package_control

0 Likes

#15

i cannot install zen code from package control, its says

Package Control: Error downloading repository. URL error host not found downloading https://api.bitbucket.org/1.0/repositories/wbond/sublime-2-zencoding.

How do i install zen code in sublime text 2?

0 Likes

#16

I am having issues that I think have to do with conflicts with other packages or keybindings.
if I type “script”, tab or “ctrl+space” expands it to:
“” as expected,

but for
ul>li3
tab or ctrl+space gives me
ul>li
350

for
ul>li5
tab does nothing and ctrl+space gives me
ul>li

(so it is expanding just the 5, I guess).

Has anyone else come across something similar or know what settings I should change?

0 Likes

#17

Subscribe to every word.

ul>li*5>a → ul>li*5><a href="" title=""></a>

I guess the problem is that ZC expand action is based on editor auto completition. Maybe it can be disabled?

0 Likes

#18

[quote=“almazmusic”]Subscribe to every word.

ul>li*5>a → ul>li*5><a href="" title=""></a>

I guess the problem is that ZC expand action is based on editor auto completition. Maybe it can be disabled?[/quote]

Same

0 Likes

#19

Is there a way to change the key stroke for Zen Coding expansion? I already have Ctrl + space mapped to something else.

0 Likes