(+84) 463.28.7979

Vim Essential Plugin: Sparkup


Sparkup is incredibly easy to use. Let’s review a handful of use cases.

1. Create an Unordered List of Links

  1. nav > ul > li > a*4 { Links }


  1. <nav>
  2. <ul>
  3. <li>
  4. <a href=””> Links </a>
  5. <a href=””> Links </a>
  6. <a href=””> Links </a>
  7. <a href=””> Links </a>
  8. </li>
  9. </ul>
  10. </nav>

Note that we can create nested elements by using the > symbol. Additionally, to create multiple elements of the same type, use the * symbol (think multiply). Lastly, we can set the value of each element by wrapping a string within curly braces.

2. Create a Basic Website Structure

  1. div#container > header > h1 { My Header } < + div#content { My Content } + footer > h2 { My


  1. <div id=”container”>
  2. <header>
  3. <h1> My Header </h1>
  4. </header>
  5. <div id=”content”> My Content </div>
  6. <footer>
  7. <h2> My Footer </h2>
  8. </footer>
  9. </div>

This time, we’re using the < symbol to travel back up the chain. This allows us to create nested HTML structures, and then return to the top of the chain to further create sibling elements.

3. Apply Attributes to Elements

  1. ul[class=nav]>li*5>a[href=http://url.com] { Link }


  1. <ul class=”nav”>
  2. <li>
  3. <a href=”http://url.com”> Link </a>
  4. </li>
  5. <li>
  6. <a href=”http://url.com”> Link </a>
  7. </li>
  8. <li>
  9. <a href=”http://url.com”> Link </a>
  10. </li>
  11. <li>
  12. <a href=”http://url.com”> Link </a>
  13. </li>
  14. <li>
  15. <a href=”http://url.com”> Link </a>
  16. </li>
  17. </ul>

Attributes can be applied to elements by placing them within brackets ([). If you omit the value — like,a[href], you can then manually insert it after expansion. In MacVim, you can use the Control + N andControl + P shortcuts to toggle between the next and previous stop points.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>