The Presentation Layer

As a recent Zen Coding convert, I was excited to learn about Sparkup, a program which seems to expand on many of the capabilities of Zen Coding.

I won’t explain what it does here, because there are already a few excellent articles about it, like this one: http://net.tutsplus.com/articles/general/quick-tip-even-quicker-markup-with-sparkup/

However I got stuck on the installation process. The only option I could find for windows was to install sparkup as a plugin for a text editor called Vim, and then you also have to get Python running on your machine.

Here are the steps I did which eventually worked for me.

1. download and install vim gvim73_46.exe to C:\Program Files.

2. Download sparkup-20091205.zip from http://github.com/rstacruz/sparkup (Downloads button on the right) follow instructions in the readme for where to put it in the vim directory.

3. Download and Install Python2.6.6 (Sparkup doesn’t work with Python 3+ according to a post by the author)

4. add python to your system path. found instructions here: http://www.imladris.com/Scripts/PythonForWindows.html

5. restart

6. create a new file with a .htm extension (test.htm for example) save on your desktop or wherever.

7. launch gVim 7.3, and use it to open test.htm (you could alternatively just open a new file and save it with a .htm extension, but vim/sparkup seem to need to see it saved as html before it works)

8. type div>#test and press ctrl+e

9. You should see it expanded to:

<div>
        <div id=”test”></div>
</div>

and you are all set.