Zen Coding in HTML,CSS,XSL,XML,HAML Using Notepad++

ZenCoding is a fun, fast, intuitive way to write html,css,xsl,xml and haml code. Consider this like the typewriter shorthand system, but only better. This kind of coding style has been around since the late 2009. ZenCoding is possible by adding the plugin for your favorite editor. Check here if your editor has a ZenCoding plugin. I personally use Notepad++ on a daily basis and this blog post specifically targets Notepad++ editor(other editors might behave the exactly same way, but I haven’t tried this on other IDE). Download the Zencoding plugin from the following location and extract the contents to the Notepad++ plugin folder(default is c:\Program Files\Notepad++\plugins). Restart the editor and you should see the ZenCoding item in the menu bar, this is a fair indication that the plugin installation was successful.

Open a new file, type the following:

html:5

and hit Ctrl+E, magic isn’t it , it outputs the following code:

 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
 
</body>
</html>

Hang on we are just getting started here. Now type in the following:

1 2	div#content>form:get>input:text[name="userName"]#usrName

Hit Ctrl+E, see the output

1
2
3

<div id="content">
	<form action="" method="get"><input type="text" name="userName" id="usrName" /></form>
</div>

By now you should be jumping in joy, for those who need to see more..here is another example

1 2	ul>li.listItems$*5

Hit Ctrl+E, see the output

 
<ul>
	<li class="listItems1"></li>
	<li class="listItems2"></li>
	<li class="listItems3"></li>
	<li class="listItems4"></li>
	<li class="listItems5"></li>
</ul>

Read more here to enhance your zenHtmlSelectors understanding. Also you can open up the ZenCoding.js file in the plugin files to see more of the abbreviations you can use. If you are comfortable with javascript, you can even hack out your own stuff by tweaking this file.
Links:
ZenCoding Project Home

“Simplicity and elegance are unpopular because thy require hard work and discipline to achieve and education to be appreciated.”
~Edsger Dijkstra

Rushi's

Java, Js and everything web

Zen Coding in HTML,CSS,XSL,XML,HAML Using Notepad++

2 thoughts on “Zen Coding in HTML,CSS,XSL,XML,HAML Using Notepad++”

vrob

Leave a Reply