Emmet(formerly Zen Coding) [HippoEDIT Wiki]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Emmet(formerly Zen Coding) ======
{{:plugins:zen_coding_list.png?direct&300 |Zen Coding Abbreviations in Completion List}}Emmet Zen (Coding) plugin is a scripting based wrapper around [[http://www.emmet.io//|Emmet (formerly Zen Coding) engine ]] written by Sergey Chikuyonok. 

"&&Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code.&&" - from Zen Coding website

{{ :plugins:zen_coding_hint.png?direct|Code Hint for Zen Coding Abbreviation}} The engine itself similar to functionality provided by built-in HippoEDIT code templates, but support much more HTML/CSS editing functionality. So, if you do HTML/CSS authoring - it is recommended to have.
===== What is supported =====
{{ :plugins:zen_coding_menu.png?direct&200|Emmet Menu}}
  * all Emmet/ZenCoding commands (as HTML Tag manipulation/navigation, navigating through code edit points, CSS reflects, increasing/decreasing numbers etc)
  * Emmet/ZenCoding settings can be found in Tools->Options->Plugins->Emmet
  * Emmet/ZenCoding abbreviations and snippets are now registered as script templates and suggested in Code Hints and also shown in Code Completion list (if enabled to show Code Templates there)
===== Files =====
{{ :plugins:zen_coding_settings.png?direct&200|Zen Coding Settings}}
After installing the plugin, you can find following three main files in [[plugins:location|<plugins>]]\emmet directory, which control wrapping of Emmet for HippoEDIT:
  * //editor.js// - main helper object with HippoEDIT related edit functionality used by Zen Coding
  * //file.js// - file related functionality (needed for some commands as "Update Image Size" )
  * //emmet.hejs// - HippoEDIT plugin file, that does all UI stuff and register handlers (menu creation, commands creation, code template registration etc)
  * directory ///core// contains Zen Coding code, which can be easy updated with newest version from Zen Coding web site, if needed (contains original files from [[https://github.com/sergeche/zen-coding/tree/master/javascript|here]]). 


===== Install =====
You can install plugin directly from HippoEDIT Plugins options page (//Tools->Options->Plugins//), if you have [[online-repository:start|Online Repository]] activated or by download plugin [[installation:bundle|bundle]] directly from this page and open it with HippoEDIT.

  * [[http://hippoedit.com/get_file.php?id=u32-file|Download and Install HippoEDIT (if not installed already)]]
  * [[http://www.hippoedit.com/api/get_bundle.php?type=plugin&id=A7016AC5-AF98-48A9-B486-8104C82CAA04|Download and Install Zen Coding (Emmet) for HippoEDIT]]

===== Supported syntaxes =====
[[http://html-editor.hippoedit.com/|HTML]], [[http://css-editor.hippoedit.com/|CSS]]
===== More =====
For more information go to Zen Coding check [[http://code.google.com/p/zen-coding/]].\\
For details about integration, you can ask on [[http://forum.hippoedit.com/scripting-scripts-and-macros/zen-coding-in-hippoedit-(gt-1-50-770)/|forum]].




#plugin