Write HTML Faster with Sparkup (Vim and Textmate)

words by Brian Racer

I recently came across a really great Vim(and Textmate) plug-in called sparkup.vim that “lets you write HTML code faster”. It’s actually a small python script, but has editor plug-ins to work with Vim and Textmate. It allows us to write HTML faster by leveraging the terse css selector syntax and converting it the much more verbose HTML.

Selector Expansion

Selector expansion is the plug-in’s primary purpose. It lets you write in a CSS selector syntax that get expanded to full HTML:

#album.photo

If you type that into vim and then press Ctrl-e on that line it will be expanded to:

<div id="album" class="photo">|</div>

This next one is a bit more complicated, I’ll explain what’s going on:

#container > #nav > ul > li.first {Home} + li*2 + li.last {About Us} < <  #content > p*2 < #footer > span.copyright {(c) 2010 Jetpack LLC}
  1. Creating a div with the id of “container”
  2. Creating a div with an id of “nav” that is a child of the “container” div. The > specifies we are creating a child element in the DOM tree.
  3. Creating a ul tag that is a child of “nav
  4. Creating an li tag with the class name “first“. Text in brackets will be plain text placed in-between the tag we are creating.
  5. Creating two sibling li elements. The + denotes what comes next will be a sibling. The * is a multiplier to create any number of similar elements.
  6. Creating an li tag with the class name “last” as a sibling to the previous li elements we have created. It will contain the text ‘About Us‘.
  7. Next now use the < symbol to go up two levels of the DOM tree.
  8. Next we create a div with the id of “content” that will contain two paragraph tags.
  9. We go back up a level and add a footer div that will have a span with the class of “copyright” that contains some boilerplate copyright text.

If we press Ctrl-e on that line, it will be expanded to the following:

  <div id="container">
    <div id="nav">
      <ul>
        <li class="first">Home</li>
        <li>|</li>
        <li></li>
        <li class="last">About Us</li>
      </ul>
    </div>
    <div id="content">
      <p></p>
      <p></p>
    </div>
    <div id="footer">
      <span class="copyright">(c) 2010 Jetpack LLC</span>
    </div>
  </div>

It will also place your cursor in the first empty tag denoted by the |. You can jump around to other empty tags with Ctrl-n (I change this mapping, more on that in a second).

If you are a fan of HAML but forced to use standard HTML in your projects this plug-in might make you a bit happier.

Shortcuts

The other piece of functionality this plug-in provides is a snipMate like shortcuts feature. These act much like snipMate snippets except they are hard-coded into the python script. However most are still quite useful and you can view the python script to review them.

Issues

After installing this plugin I was having tabbing/tab-expansion issues. I believe it’s Ctrl-n mapping which allows you to jump around to empty tags was conflicting with some other plug-in I had installed, possibly SuperTab. I remapped it by putting the following in my .vimrc:

let g:sparkupNextMapping = '<c-x>'

That doesn’t seem to conflict with anything for me, and since it only gets used in normal mode it doesn’t conflict with Tim Pope’s excellent ragtag plug-in (read more on that here).

Video Demonstration

Some of this might make more sense when you see it in action, so watch the following YouTube video(make sure to switch it to 720p for crisper text):

Conclusion

Have fun writing faster HTML! You can see more examples on sparkup’s Github page.

  • xgetc25

    Also you can try this awesome bundles(plugins)
    http://code.google.com/p/zen-coding/
    and it would great to have comparison table with Sparkup.

  • John

    What color scheme are you using?

  • http://najafali.com Ali

    As a die hard vim user who juices on plugins regularly, this isn’t the way to go. While _writing_ html becomes a lot easier, _editing_ html is just as hard. A much better alternative that is as easy to edit later on is to use an intermediary language (i.e. HAML/SASS). That way editing and writing is as DRY as humanly possible. Just my 2 cents.

  • http://onehou.se Elliot Larson

    I agree that using HAML/SASS is definitely better than writing HTML, however, there are a lot of projects where HAML isn’t available for whatever reason. In the absence of HAML, Sparkup is a huge time saver.

  • Pingback: === popurls.com === popular today

  • Rizky

    definitely have to try this out right away.. thx.. bookmarked!

  • http://intranation.com/ Bradley Wright

    I have to question this code snippet:

    Home
    |

    About Us

    That’s invalid—is that really what this plugin expands to? Invalid HTML? You know I could write tag soup by hand right?

  • http://intranation.com/ Bradley Wright

    Gah, try this:

    <div id=”nav”>
    <li class=”first”>Home</li>
    <li>|</li>
    <li></li>
    <li class=”last”>About Us</li>
    </div>

  • http://jetpackweb.com Brian Racer

    @Bradly – sparkup creates proper markup, at at least when given proper selectors. I fixed the html output to reflect what would actually be generated (with the ul element)

  • http://osweb.dk Michael Lajlev

    What is the difference between this one and zen-coding?

  • http://jetpackweb.com Brian Racer

    @Michael – Zen Coding doesn’t work in vim.

  • http://alexyule.com Alex Yule

    Thought I was imagining things, but I’m pretty sure there’s a typo in the code… not sure if it was actually generated like that by Sparkup, but the UL tag is missing…

  • http://aeonbeat.net Martin

    I’ve been practicing a combination of zen-coding and sass for my work environment and the result is satisfying. i didn’t know zen-coding is not available for vim though.

  • Pingback: Vim confs prontas para trabalhar com Python e Django - Chronosbox

  • Pingback: Sparkup lets you write HTML code faster

  • Eddie

    You sir, are awesome. Just made my day!

    If anyone else couldn’t find a shortcut list, just look at the source: http://github.com/rstacruz/sparkup/blob/master/sparkup

  • jason

    Using HAML is a crazy idea in my opinion.

    It means an extra layer of abstraction to a language that is already very clean and straight forward.

    Respect your HTML.

    As soon as you are locked into HAML, you cannot share your source or work with other utilities. And it doesn’t help with including designers into the process (which is already a point a lot of people fail at)

  • Kkruit

    Thank you, I’m fairly new with vim and could not figure out that tab issue!

  • Pingback: One with Vim – Invisible Theory

  • http://twitter.com/karthikophobia Karthik Vadlapatla

    Really useful plugin. Thank you

  • Anonymous

    How does this compare to ZenCoding?
    http://code.google.com/p/zen-coding/
    And the vim port:
    http://mattn.github.com/zencoding-vim/

  • Pingback: Vim相关资料大全 | 天天三国杀