Sparkup System Service, HTML shorthand everywhere

I’m shocked that this hasn’t been done before. I’m sure it has, really, but my searches didn’t turn anything up…

Many web devs/designers are familiar with Zen Coding, a little tool available for many text editors which turns shorthand strings into full HTML, among a lot of other nifty tricks. A derivation called Sparkup came out a couple of years back. It added the ability to backtrack up the hierarchy from within the shorthand snippet, which I found to be amazingly useful.

So this all started when I made a keybinding yesterday which turns selected text into a paired HTML tag and allows attributes, so div id="heythere" converts to <div id="heythere"></div> when I type Control-< (TextMate style). That’s available on the KeyBindings github repo, if you’re interested. I showed the KeyBinding to Joe Bartlett and the first thing he asked was whether it could do what Zen Coding does. Rabbit hole.

It wouldn’t happen as a keybinding, but it could work as a System Service. No use reinventing the wheel, so I spent a while playing with getting Zen Coding to fit before I remembered Sparkup. Sparkup’s features are pretty minimal compared to the huge toolset that Zen has become, and as such it fits in one file with no dependencies. Perfect for a Service.

I packaged it up and am posting it here. Totally not my work:

Sparkup is written by Rico Sta. Cruz and is released under the MIT license.

This project is inspired by Zen Coding of Vadim Makeev. The Zen HTML syntax is forward-compatible with Sparkup (anything that Zen HTML can parse, Sparkup can too).

Download the System Service version below. To use it, unzip and add the .workflow file to ~/Library/Services. Then, open up System Preferences and go to the keyboard shortcuts tab. Select System Services, find it in the panel on the right and click the “Add Shortcut” button that appears when you hover over the right side of its row in the list. Give it a keyboard shortcut you’ll remember. I used Ctrl-, because that’s what it’s bound to in Espresso. Muscle memory.

Now you can type out a shorthand string, select it and hit your shortcut key to watch it blossom into full HTML. Like a code flower. There are quite a few of examples on the Sparkup page, so I’m not going to break down the syntax here. Basically:

div.prettyneat#really>ul>li.item$*2<ol>li*2{ordered list item}+p.last

becomes:

<div class="prettyneat" id="really">
    <ul>
        <li class="item1"></li>
        <li class="item2"></li>
    </ul>
    <ol>
        <li>ordered list item</li>
        <li>ordered list item</li>
        <p class="last"></p>
    </ol>
</div>

Note that, unlike Zen Coding, you can use “<” to traverse back up the tree. You can also use linebreaks and indentations on longer strings if it helps you keep things straight. Useful when you’re laying out an entire document structure in one string:

div.prettyneat#really>
p.first{content}
+p*2
+ul>
	li.item$*6>a[href=#]
<<ol>
	li*3{ordered list item}
+p.last

Also, “html:5” will give you a full HTML5 document with UTF-8 meta, head and body, and additional elements appended with “>” will go inside the body section. Very handy to have when you’re outside of your usual HTML editor.