Zen coding (Emmet)

[robhrt7]

Would be great to have zen coding inside dabblet -http://code.google.com/p/zen-coding/

[pepelsbey]

+1 for Zen Coding, but it would be better to implement newer syntax: https://github.com/pepelsbey/zen-coding-snippets — see CSS.txt and HTML.txt for the snippets and http://zen-coding.ru/textarea/ for the JS demo.

[goshacmd]

:+1:

[LeaVerou]

I might, if lots of people request it. So if it's something you want to see, please post here and say so.

Although I'd prefer to code some sort of generic system to allow people to use whatever such script they want.

[kizu]

+1 for Zen Coding, it's one of the best ways to write HTML quickly. Having it there by default would be great, 'cause it's almost become an industry standard: it's already included by default in Sublime Text 2, Espresso, and many others.

[kigorw]

+1, must have feature.

[apoleshchuk]

:+1:

[remitbri]

Pretty please!

[LeaVerou]

Can anyone answer the following questions, as I don't personally use zen coding and I can't figure it out from the docs?

• Is it only for HTML generation? So it only has to be integrated in the HTML tab, right?
• Does it have a function to tell if some typed code uses Zen Coding or not?
• Is there any online demo? I can't figure out how that textarea demo on the website works at all. I type in it, nothing happens.

[pepelsbey]

— ZC generates both CSS and HTML, based on snippets, see CSS.txt and HTML.txt

tr + Tab should give you

-webkit-transition:$1;
-moz-transition:$1;
-ms-transition:$1;
-o-transition:$1;
transition:$1;

— I'm not sure, it's better to ask https://github.com/sergeche — Go to textarea type html:5 and press Tab

[kizu]

1. There're some CSS snippets: http://code.google.com/p/zen-coding/wiki/ZenCSSPropertiesEn — they are static, so in feature there would be something to replace them. But for start even this would be enough for CSS.
2. On such questions you can ask @sergeche or zen_coding at twitter. From what I know it must be not so hard to add zen-coding to contenteditable: there is a plug-in for codemirror.
3. Just press tab after abbreviation here or there :) It's not something that write code automatically, you must call it manually by tab, so it won't cause any issues to anyone who don't use zen-coding, since it needs some code in abbreviation and if there are only whitespaces, then it would just use default behavior of tab.

[LeaVerou]

Oh that's very good, I guess I can include it by default then, as long as it's loaded asynchronously and doesn't block initial load. I'd only need to customize pre.onkeydown to avoid inserting a tab character on these cases.

I wonder if the guys at Zen Coding want to help with the integration.

Edit: On second thinking, this is probably a large download, so it should be loaded conditionally. So I'd better add a setting about it.

[sergeche]

@LeaVerou, I can answer your questions and provide any help on ZC implementation. All you need is to implement Zen Editor interface in order to let ZC core know how to talk with back-end editor: https://github.com/sergeche/zen-coding/wiki/plugin-howto

1. ZC is actually an advanced snippets system, used to generate structured data. It’s primary used for XHTML generation, but can be adapted to any other structured data. Basically, it parses CSS-like abbreviation into a tree and then produces output based on filters.
2. Most ZC actions returns true or false depending on if action was performed successfully. So, after you implement editor interface, you can call zen_coding.runAction('expand_abbreviation', editor, syntaxMode) and it will return true if abbreviation was expanded successfully, false otherwise. You can also call zen_coding.runAction('expand_abbreviation_with_tab', editor, syntaxMode), which will try to expand abbreviation and put 'tab' if it fails. Actions are defined in https://github.com/sergeche/zen-coding/blob/master/javascript/zen_actions.js#L1009

[LeaVerou]

I just checked out the implementation for codemirror and it looks kinda huge ( https://github.com/sergeche/zen-coding/blob/master/plugins/codemirror/zen_editor.js ) I most certainly can't devote that much time to this, especially now with 20+ other open issues to take care of. If anybody wants to do it, I can help. It has to be easier, as in dabblet:

• old browsers don't matter
• I've implemented read-only element.selectionStart / element.selectionEnd and element.setSelectionRange() for setting the selection, so it should work similarly to a textarea, with textContent instead of value (but I can set an accessor on value so it would work identically)

Also, it seems Zen Coding implements some things already in dabblet (increment/decrement) which would need to be removed from the bundled version.

[iamstarkov]

+1 for Zen Coding

[plakadiva]

+1 Emmet rocks!