The ZenCoding extension for Visual Studio can be installed by itself or as part of the WebEssentials plug-in bundle, see also WebEssentials website. In ZenCoding you use a shorthand to describe a block of html, with the cursor at the end of the line hitting the TAB key will generate the full html code. Getting down to business, here is a list of the formatting characters and their meaning.
| # | Indicates text defines an element id |
| > | Secified a child element |
| + | A sibling element |
| . | css class(es) |
| *n | Element repeats n times |
| [] | Explicitly specify atrribute. |
| {xxx} | Explicit text content |
| $ | Numeric increment |
Example 1 – Element Id
So as a first example, type this in to Visual Studio and with the cursor at the end of the line hit the TAB key.
div#sidePanel
And the following HTML is produced
<div id="sidePanel"></div>
That is pretty much all there is to it. For brevity the following examples show the shorthand to type followed by the HTML generated when the TAB key is pressed (when the cursor is at the end of the line).
Example 2 – Explicit Attributes
img[alt='logo image'] <img src="" alt="logo image" />
Exampe 3 – Css Class
span.heading <span class="heading"></span>
For multiple css classes the [] can be used
img[class='logo tooltip-flyout'] or specify each class using the dot notation img.logo.tooltip-flyout <img src="" alt="" class="logo tooltip-flyout" />
Example 4 – Repeating Elements
ul#features>li*3
<ul id="features">
<li></li>
<li></li>
<li></li>
</ul
Example 5 – Explicit Text
label{submit}
<label>submit</label>
Example 6 – Putting It All Together
div#sidePanel>span.heading+img.logo[alt='logo image']+ul#features>li*3>a{link $}
<div id="sidePanel">
<span class="heading"></span>
<img src="" alt="logo image" class="logo" />
<ul id="features">
<li><a href="">link 1</a></li>
<li><a href="">link 2</a></li>
<li><a href="">link 3</a></li>
</ul>
</div>
There are a few special features built in, Generation of lorem ipsum text, Lorem Pixel Code and PlaceHold.it blank images.
Example 7 – Generating Lorem Ipsum Text
Here we specify 5 list items each containing 4 words.
ul>li*5>lorem4
<ul>
<li>Amet, consectetur adipiscing elit.</li>
<li>Fusce vel sapien elit.</li>
<li>In malesuada semper mi.</li>
<li>Id sollicitudin urna fermentum.</li>
<li>Ut fusce varius nisl.</li>
</ul>
Example 8 – Lorem Pixel Code
Lorempixel is a free image place holder service. Useful for mocking up layouts where you do not have all your own images yet. Below are a number of Zencoding examples. There are more features like greyscale images and images with text, see the lorempixel.com site for a full list
A completely random image with a default 30 by 30 pixel size.
pix <img src="http://lorempixel.com/30/30/" alt="" />
A random image of a specific but equal with and height.
pix-200 <img src="http://lorempixel.com/200/200/" alt="" />
A random image with different width and height
pix-200x100 <img src="http://lorempixel.com/200/100/" alt="" />
An image of a specific but equal with and height from a specific category. A random image index will be selected from those in the category, in this case 7, though this can be changed if another image fits your needs. There are generally 20 images per category currently though the odd category may have less than 20 images.
pix-200-animals <img src="http://lorempixel.com/200/200/animals/7/" alt="" />
Mixing in some of the other Zencoding shorthand. A random image with an ALT attribute and specific CSS class.
pix[alt='product image'].borderless <img src="http://lorempixel.com/30/30/" alt="product image" class="borderless" />
Example 9 – PlaceHold.it Images
Placeholder.com is another image service with similar features. The big difference with this service is the images are grey tone with the image size as text which is quite useful for when you are mocking up layouts containing a number of different image sizes.
A basic image, defaults to 30 by 30 pixels.
place <img src="http://placehold.it/30x30/" alt="" />
An image with a specific but equal width and height.
place-200 <img src="http://placehold.it/200x200/" alt="" />
An image of a specific but different width and height
place-200x100 <img src="http://placehold.it/200x100/" alt="" />
Mixing in some of the other Zencoding shorthand. A random image with an ALT attribute and specific CSS class.
place[alt='product image'].borderless <img src="http://placehold.it/30x30/" alt="product image" class="borderless" />
ZenCoding is one of those things where you either love it and tend to use it a lot or don’t see the point in it and so never use it. In the latter case I can see how taking the time to learn and use ZenCoding, which can take a few attempts when trying to create a specific formatted HTML layout, takes more time than just typing (i.e. Copy/Paste) the desired html code in the first place. On the Visual Studio Marketplace ZenCoding pages some people have mentioned how the plug-in does not work in the Community 2017 edition. All the above examples were created using VS2017 Community edition, apart from a few bugs (highlighted below) I can say it does work.
Below are some examples of bugs I have experienced when using Zencoding in MVC views in VS2017 Community edition, although they have worked with Web Forms.
ul>li*3>a The above produces half a job by formatting the link ul>li*3><a href="#">content</a> where I was hoping for an un-ordered list of 3 list items, with each containing a link. <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul>
Altough in MVC Razor view the following works.
ul>li*3>a.referenceLink
<ul>
<li><a href="" class="referenceLink"></a></li>
<li><a href="" class="referenceLink"></a></li>
<li><a href="" class="referenceLink"></a></li>
</ul>
Trying to generate a list with explicit text fails but in a different way.
div>ul>li*3{abc}
<div>
<ul></ul>
</div>
For me, the Zencoding plug in is a simple tool that enhances my coding time.
dotnetable 