Home Download Buy Blog Forum Support

Where are full instructions to install Zen Coding?

Where are full instructions to install Zen Coding?

Postby sublimeisfine on Fri Aug 05, 2011 1:17 am

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 https://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:
Code: Select all
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"')
Last edited by sublimeisfine on Mon Aug 08, 2011 5:10 am, edited 3 times in total.
sublimeisfine
 
Posts: 6
Joined: Mon Aug 01, 2011 1:16 am

Re: Where are full instructions to install Zen Coding?

Postby buzzomatic on Fri Aug 05, 2011 2:43 am

1. Go to https://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.
buzzomatic
 
Posts: 5
Joined: Thu Aug 04, 2011 2:31 am

Re: Where are full instructions to install Zen Coding?

Postby sublimeisfine on Fri Aug 05, 2011 6:40 am

buzzomatic wrote:1. Go to https://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.


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?
sublimeisfine
 
Posts: 6
Joined: Mon Aug 01, 2011 1:16 am

Re: Where are full instructions to install Zen Coding?

Postby oriceon on Fri Aug 05, 2011 7:11 am

http://screencast.com/t/RTMkRe4oO

See this tutorial .. how`s workin` on a Windows 7
oriceon
 
Posts: 56
Joined: Tue Jun 14, 2011 6:06 am

Re: Where are full instructions to install Zen Coding?

Postby adzenith on Fri Aug 05, 2011 5:00 pm

sublimeisfine wrote: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?


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?
adzenith
 
Posts: 1215
Joined: Mon Oct 19, 2009 9:12 pm

Re: Where are full instructions to install Zen Coding?

Postby sublimeisfine on Fri Aug 05, 2011 5:01 pm

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.

https://screencast.com/t/x33iruNMm

And yes, I had previously restarted ST2 when I started the screencast.
sublimeisfine
 
Posts: 6
Joined: Mon Aug 01, 2011 1:16 am

Re: Where are full instructions to install Zen Coding?

Postby oriceon on Fri Aug 05, 2011 5:57 pm

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.
oriceon
 
Posts: 56
Joined: Tue Jun 14, 2011 6:06 am

Re: Where are full instructions to install Zen Coding?

Postby sublimeisfine on Sat Aug 06, 2011 4:30 am

oriceon wrote: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.


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!
sublimeisfine
 
Posts: 6
Joined: Mon Aug 01, 2011 1:16 am

Re: Where are full instructions to install Zen Coding?

Postby japatu.work on Mon Nov 07, 2011 12:26 am

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.
japatu.work
 
Posts: 1
Joined: Mon Nov 07, 2011 12:16 am

Re: Where are full instructions to install Zen Coding?

Postby firefusion on Mon Nov 07, 2011 4:09 pm

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.
firefusion
 
Posts: 218
Joined: Fri Oct 16, 2009 7:37 am

Next

Return to General Discussion

Who is online

Users browsing this forum: Exabot [Bot] and 28 guests