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