Skip to content

ZenCoding Visual Studio Add-In

September 28, 2011

After watching a HTML/CSS video on Webdesigntuts, I noticed the author was using an editor for Mac called Coda. Not incredible in itself, but an add-in he used caught my attention.
Enter ‘ZenCoding’

By writing markup in a CSS-ish way, the HTML was magically generated:


Turned into

<div id='container'>

This version is deprecated. Please go to the new Extension instead:
Having looked around for a Add-In a short while, I decided to roll my own :)
So here it is:

Installation Instructions
1. Unzip and put both files in [Your documents folder]\Visual Studio 2010\AddIns
2. Start Visual Studio and make sure the AddIn is enabled in Add-in Manager
3. The ‘Expand Zen’ menuitem should be visible on the ‘Tools’ menu!

Current features

Simple operations

Selector Description Example
+ Sibling h3+span -> <h3></h3><span></span>
> Child div>h3 -> <div><h3></h3><div>
* Multiplier div>span*2 -> <div><span></span><span></span><div>
# Id div#container>h3 -> <div id=’container’><h3></h3><div>
. Class div.myClass>h3.title.big -> <div class=’myClass’><h3 class=’title big’></h3><div>
[attribute=value] Other attributes div[placeholder=’Hello’][data-whatever=’world’] -> <div data-whatever=’world’ placeholder=’Hello’><div>

The above table for instance would be equivalent to:


Pretty cool, eh? :)

Features that I haven’t implemented yet include automatic counters, and the next version will have this implemented. To show you what I mean:


would turn into

	<li class='item001'></li>
	<li class='item002'></li>
	<li class='item003'></li>
	<li class='item004'></li>
	<li class='item005'></li>
	<li class='item006'></li>

So, depending on how many $-signs you put into the class or Id or whatever, it will be substituted with a 0-padded counter.
So, please download it, try it, hate it, love it. And if you have any bugs what so ever, please let me know right here as a comment on this post. I’ll probably fix issues pretty immediately!
Have fun zencoding!
This version is deprecated. Please go to the new Extension instead:

From → Design, Development

One Comment
  1. Shion permalink

    I was just about to write my own Add-In when I found this page.

    Thanks a lot, works great!

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 )

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


Get every new post delivered to your Inbox.

%d bloggers like this: