I knew it last year. Sublime Text 2 This editor, at that time was quite favorable, but also spent a period of time to develop. Recently, I accidentally learned that there is a plugin such as Zen coding, this plug-in and can support plug-in sublime Text admiringly.
first say what is Zen Coding. If you have used jquery, you will definitely be impressed with the selector. The Zen coding consists of two core components: an abbreviation extender, and an HTML tag-matching device. Using CTRL + ALT + Enter to Exhale zencoding, we can use div#content>ul>li*3>a[href= "javascript:void (0);"] {links$} In a short sentence, generate the following code: <did id= "Content" > <ul> <li><a href= "javascript:void (0);" >Links1</a></li> <li><a href= "javascript:void (0); >Links2</a></li> <li><a href= "javascript:void (0); >Links3</a></li> </ul></did> Such a magical way of writing, with sublime Text real-time preview of the function, the whole process is really marvelous.
installation of the Zen Coding pluginThe installation process of the plug-in is very clear in the reference material, which is extracted for later use. 1. Install package control. Use CTRL + ' to bring up the console, then enter the following code and execute.
import urllib2,os;pf=‘Package Control.sublime-package‘;ipp=sublime.installed_packages_path();os.makedirs(ipp) ifnot os.path.exists(ipp) elseNone;open(os.path.join(ipp,pf),‘wb‘).write(urllib2.urlopen(‘http://sublime.wbond.net/‘+pf.replace(‘ ‘,‘%20‘)).read()) |
2. Restart Sublime Text 2 and see the package control in Preferences->package settings to indicate that the installation was successful. 3, through COMMAND + shift+ p call package management, enter install, select Install package 4, then enter Zen coding to find the packages to install, after installation can be used. Once the installation is complete, we can use Ctrol + Alt + Enter to exhale the zencoding. In fact, all the paths of the installation packages, we can also directly download the Zencoding code package, put it under this path. In addition to sublime Text, Zen coding also supports a number of other editors, listed below, to see if you have a favorite editor. Officially supported editors
- aptana/zend Studio/eclipse (crossplatform) https://github.com/sergeche/eclipse-zencoding
- TextMate (MAC). Available in the Flavors:basic snippets (Zen HTML and Zen CSS) and full-featured plugin (zencoding for textmate). Bundles > Zen Coding menu item
- Coda (MAC)-external download, via TEA for Coda. Plug-ins > TEA for Coda > Zen Coding menu item
- Espresso (MAC)-external download, via TEA for Espresso. Zen Coding is bundled with Espresso by default, but you should upgrade ZC to latest version. Actions > HTML menu item
- Komodo edit/ide (crossplatform)-external download. Tools > Zen Coding menu item
- notepad++ (Windows). Zen Coding menu item Also A Python version of NPP plugin is Available:http://sourceforge.net/projects/npppythonscript/file s/
- PSPad (Windows). Scripts > Zen Coding menu item
- <textarea> (browser-based). See online Demo.
- Editarea (browser-based). See online Demo.
- Codemirror (browser-based). See online Demo.
- CodeMirror2 (browser-based). See online Demo.
Third-party Supported Editors
- Dreamweaver (Windows, Mac)
- Sublime Text (Windows)
- Sublime Text 2 (crossplatform)-external download
- UltraEdit (Windows)
- TopStyle (Windows)
- GEdit (crossplatform)-franck Marcia ' s plugin, Mike Crittenden ' s plugin
- Bbedit/textwrangler (MAC)-external download
- Visual Studio (Windows)-at Visual Studio Gallery
- EmEditor (Windows)-external download
- Sakura Editor (Windows)-external download
- EditPlus (Windows)-external download, Release notes
- NetBeans (crossplatform)-download
- Chrome Extension -external Download
- userscript for Greasemonkey -external download
- Geany -external Download
- RJ TextEd -built in since v7.50
- akelpad -external Download
- Wiode web-based IDE
- bluefish -built-in in v2.2.1
the usage of Zen CodingWhen writing code using zencoding, you need to follow some abbreviation rules:
- E
The element name (Div, p);
- E#id
Elements with ID (div#content, P#intro, Span#error);
- E.class
The Elements with Class (Div.header, P.error), ID and class can be written in a row, div#content.column
- E>n
Child elements (Div>p, Div#footer>p>span)
- E*n
Multiple elements (Ul#nav>li*5>a)
- E+n
Multi-Item Element
- E$*n
Elements with an ordinal
some tips for using Zen coding in Sublime Text 1, abbreviation extension (Expand abbreviation). Before you know, you can generate code by using CONTROL + ALT + ENTER to enter the abbreviation for ZC in a new line. At the same time, if we write the ZC abbreviation directly in the editor, such as Div#content>p, when the cursor is placed after p, can be expanded by tab, ZC will search from the cursor to the left to the first space, between the code as the ZC abbreviation, so that you do not have to open a new line input each time, Improve efficiency, the disadvantage is not to be able to preview in real time. &NBSP;2, nested code (Wrap with abbreviation) , as shown, can be implemented to embed other code outside of the already written code, by placing the cursor on the label you want to nest, and then using CONTROL + ALT + Enter the command line of the outgoing ZC, it is OK. In fact, Zen coding also offers a number of handy code-writing operations, such as label matching, returning previous/next edit points, updating IMG tags, merging rows, and so on, but these features are not available because full support is not provided in sublime text. Reference: 1, Sublime text 2 installation Zen Coding2, Baidu Encyclopedia Zen Coding3, Zen Coding4, about the use of Sublime text 2 of those things 5, Sublime Text6, zencoding C SS Properties7, Zen Coding in Sublime text 28, Zen Coding let notepad++ code write legs 9, Sublime Text 2 Editor Practical tips
