Html/css: ZenCoding and Emmet

Wiki

“Zen Coding is a set of plug-ins for text editors that allow for high-speed coding and editing in HTML, XML, XSL, and other structured code formats via content assist. The project was started by Vadim Makeev in 2008[1] and continues to be actively developed by Sergey Chikuyonok and Zen Coding users based upon the Zen Coding 2.0 concept.[2]The tools have been incorporated into a number of high-profile text editors, as well as some plug-ins developed by the Zen Coding team and others implemented independently. However, Zen Coding is primarily independent from any text editor, as the engine works directly with text rather than with any particular software.[3]

Zen Coding is open sourced under the MIT License.

In recent versions it has been renamed to Emmet.”

ZenCoding01

Now, ZenCoding is part of the VS WebEssentials extension for VS2013, but I’m not having a lot of joy with that. And indeed, Visual Studio seeems unnecessarily heavyweight when all I want to do is write and run web pages, albeit in Angular/Node. WebStorm looks the nicest candidate, but as ever, JetBrains charge a lot for their good products, quite reasonably. Which then arguably leaves NotePad++ and the ZenCoding plugin extension for that. Functionally, it should give everything that every other ZenCoding host gives.

We go here to download the plugin, and for the very useful cheat sheet.

ZenCoding02

 

The NotePad++ extension – download it, extract the folder [NppScripting] and the [NppScripting.dll] to the plugins folder, as here in the red boxes:

ZenCoding04

Now, I am pretty sure the green Python references were not there before I started, so those are doubtless dragged in when you are prompted by NotePad++. But I’m getting ahead of myself.

In NotePad++, go into the menu / Plugins / Plugin Manager / Show PlugIn Manager

ZenCoding06

Zen Coding has been found. If you select and install, then NPP recognises the Python dependency:

ZenCoding07

ZenCoding08

After a restart of NPP, you see the Zen Coding menu item. In fact at the moment, I’m just using the shortcut of Ctrl-E to expand the snippets, i.e. the menu isn’t needed right now.

This is a powerful example (it’s only getting a snippet, admittedly, but as with all snippets saves you thinking too hard about the syntax):ZenCoding09

So once that html:5 is there, press [ctrl-E] to expand:

ZenCoding10How did I know it was Ctrl-E? The cheat sheet (see above for source):

ZenCoding11

  Fin

Well, turns out some of that was a bit of a waste of time: An adobe project called Brackets, is free and looks really good. It also has support for Emmet, which is the updated name/version for ZenCoding – I prefer the latter, but hey.

Brackets runs its own Node server, has realtime update of code changes (Live Preview), and looks really, really good, considering it’s free. Whether things stay like that…

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s