Html/css: ZenCoding and Emmet


“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.”


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.



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


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


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



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):



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…





2 thoughts on “Html/css: ZenCoding and Emmet

  1. Hello. I was wondering what was the nature of the conflict that caused the name change to emmet? Are you still involved in the development? I notice your name is conspicuously absent on the emmet credits page.

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s