Writing markup the easy way with ZenCoding and emacs

I’ve stumbled upon a nifty extension for emacs (among others) that enables writing HTML using CSS selectors-like expressions.

I don’t know for you, but I do not enjoy writing xml that much. I have nothing against XML itself, it’s just the typing part that annoys me : especially the angle brackets and the closing of tags.

CSS selectors on the other side are written using a compact and an easy-to-type syntax, and while the standard version (used in cascading stylesheets) doesn’t match the xml expressivity, the ZenCoding extended selectors syntax pretty much covers most of the common cases.

Here how it works : this selector :

 html>(head>title)+body>(div#header>h1)+(div#menu>ul>li*4>a href=#)+div#content+div#footer

yields :

<html>
  <head>
    <title>
    </title>
  </head>
  <body>
    <div id="header">
      <h1>
      </h1>
    </div>
    <div id="menu">
      <ul>
	<li>
	  <a href="#">
	  </a>
	</li>
	<li>
	  <a href="#">
	  </a>
	</li>
	<li>
	  <a href="#">
	  </a>
	</li>
	<li>
	  <a href="#">
	  </a>
	</li>
      </ul>
    </div>
    <div id="content">
    </div>
    <div id="footer">
    </div>
  </body>
</html>

It’s a bit too long and probably complex for a first example, but you get the general idea 🙂

To install this extension, grab the latest version of zencoding-mode.el from github, and add the following to your ~/.emacs :

(load "~/emacs/ext/zencoding-mode.el") ;; Change this path to suit your case
(require 'zencoding-mode)
(add-hook 'sgml-mode-hook 'zencoding-mode) ;; Auto-start on any markup modes

and voilà : when you are editing a sgml file, type a selector then hit C-RET to expand it to xml.

For a gentler and more detailed introduction to ZenCoding, here’s it’s page in emacs wiki (which is to take credit for what I presented here)

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com 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

%d bloggers like this: