ZenCoding Visual Studio Add-In

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:

div#container>ul>li*5

Turned into

<div id='container'>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

This version is deprecated. Please go to the new Extension instead: http://yngvenilsen.wordpress.com/zen
Having looked around for a Add-In a short while, I decided to roll my own
So here it is:
ZenCoding.zip

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:

table>(tr>th*3)+(tr>td*3)*6

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:

ul>li.item$$$*6

would turn into

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

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: http://yngvenilsen.wordpress.com/zen

About these ads