Tutorial Details
- Plugin: Sparkup
- Screencast Length: 5 Minutes
The sparkup plugin, inspired by the popular ZenCoding, allows you to rapidly create HTML structures. It’s an essential tool in your Vim handbag!
Usage
Sparkup is incredibly easy to use. Let’s review a handful of use cases.
1. Create an Unordered List of Links
nav > ul > li > a*4 { Links }
Output
<nav>
<ul>
<li>
<a href=""> Links </a>
<a href=""> Links </a>
<a href=""> Links </a>
<a href=""> Links </a>
</li>
</ul>
</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
div#container > header > h1 { My Header } < + div#content { My Content } + footer > h2 { My Footer }
Output
<div id="container">
<header>
<h1> My Header </h1>
</header>
<div id="content"> My Content </div>
<footer>
<h2> My Footer </h2>
</footer>
</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
ul[class=nav]>li*5>a[href=http://url.com] { Link }
Output
<ul class="nav">
<li>
<a href="http://url.com"> Link </a>
</li>
<li>
<a href="http://url.com"> Link </a>
</li>
<li>
<a href="http://url.com"> Link </a>
</li>
<li>
<a href="http://url.com"> Link </a>
</li>
<li>
<a href="http://url.com"> Link </a>
</li>
</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 and Control + P shortcuts to toggle between the next and previous stop points.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
As much as I love Sparkup, I can’t wait to ditch it once Zen Coding for vim gets updated to the new specs on the main branch, many of which are similar to what was in Sparkup (the ability to add content, any attribute you like, etc.) There is a huge limitation to Sparkup (that the new version of ZC fixes) is escaping back into a parent element more than once in your short code. Try the example below with Sparkup to see what I mean.
div.parent > div.child-1*3 > h1{Hello World!} > a < p{This should be here three times}
This is a known issue on Github since last year and hasn’t been fixed since the author has been silent since 2009.
Hopefully Zen Coding for vim gets updated soon so I can quickly create whole html templates in seconds flat.
Good point.
zen-coding seems to allow you to use brackets too do things at the same level. eg:
div#page>div.logo+(ul#navigation>li*5>a)+(ul#links>li*5>a)
will give you
<div id=”page”>
<div class=”logo”></div>
<ul id=”navigation”>
<li><a href=”"></a></li>
<li><a href=”"></a></li>
</ul>
<ul id=”links”>
<li><a href=”"></a></li>
<li><a href=”"></a></li>
</ul>
</div>
Not quite as nice as being able to just type <, but it seems to do the same job
Sorry, just realised my post was basically reiterating the point you were making. I blame it on the lack of sleep :p
This series is great! I’m following each part of it and I’m currently thinking about developing in VIM only.
I’m a PHP web developer and I’d like to have a minimal IDE, let’s call it a project view. Do you have something like this up your sleeve? Requirements would be a kind of file tree with individual grouping, switching between panes, PHP function following (ctrl + click on function in IDEs like NetBeans), finding expressions in all project files, save/open that project view, aso..
Can you help me out?
Thanks for that excellent research and tutorials so far!
> a kind of file tree with individual grouping,
NERDTree.vim, project.vim etc
> switching between panes,
:help wincmd
:help window-move-cursor
> PHP function following (ctrl + click on function in IDEs like NetBeans),
:help tags
> finding expressions in all project files
:help vimgrep
> save/open that project view
:help mksession
> aso..
:help faq
http://www.vim.org/scripts/script.php?script_id=69 should do the job, although I’ve not managed to get it working with the portable version of gVIM (I think because the portable version doesn’t work with the home directory, which the project plugin does by default)
I can also recommend the VIM Wiki plugin (http://code.google.com/p/vimwiki/), which gives an easy way to build a flat file wiki directly in VIM for tracking your project developments and to-do list (although I think there’s another plugin for the to-do list, but the wiki works fine for me)
Awesome plugin!
Thank you for all this tuts Jeffrey :)
I’m loving these essential plugin screen casts!
I noticed there was some sort of auto-complete widget that kept popping up whenever you started an element; what does that?
Think that’s the snippets plugin he mentioned going over later that’s doing that
The only problem I’ve have with sparkup is that after sometime, it stops working, especially if I open 2 files with vsp, when I press Ctrl+E it doen’t do anything, I have to restart gvim to have it functional again, I don’t know If that happens to anyone else.
I installed the plugin, but when I press Ctrl+E it copies the characters directly below. Is this the default functionality for Ctrl+E (without the plugin installed)? it’s hard to tell if the plugin install took. It’s not my .vimrc because I emptied that out to troubleshoot.
in your ~/.vimrc file try this setting
filetype plugin on
thanks for the plugin!
is there a difference between Vim Zen Coding (http://code.google.com/p/zen-coding/) ?
And by the way could you have another look at your post “Vim Essential Plugin: EasyMotion”, I asked about server site editing and you said there was an easier way, but you didnt mention it :)
This is builtin functionality these days
:help netrw
(and if you want a more fancy remote tree than the builtin netrw provides, use NERDTree plugin)
FYI, for anyone having trouble installing: After installing I tried on a blank buffer and it wouldn’t work. It needs to be a html file.
Hello Jeff, i think i need help installing markdown on windows.
Does sparkup require a local instalation of python (on Windoze) in order to work? I can’t really seem to be able to get around actually installing the damn thing. After searching I found someone mention that having python is a prerequisite in a sort of (!duh) fashin. Is that true? Will installing python make it finally work?
Whenever I ctr+e I get:
‘python’ is not recognized as an internal or external command,
operable program or batch file.
how do you fix that? (tried google and forums to no end) anyone help? :D
I installed this and after pressing Ctrl + E, nothing happens. Do i stay in insert/append mode? Do I need to compile anything?
Are you editing a html file? It has to be html for the plugin to work for that page.
Really nice plugin, thanks for the tips!
I’ve got it running on my laptop with Ubuntu and it’s great. However, here at work I’m on a windows pc and it seems that only way to get it running is by following this guide:
http://jessebreuer.tumblr.com/post/1432645301/getting-sparkup-running-in-windows
Hope it helps other windows users
Does it work on Windows? When I CTLR+E I get the message “‘python’ is not recognized as an internal or external command, operable program or batch file”. How do I fix this?
Hi Jeffrey you should really take a look at pathogen by Tim Pope it eases the plugin management a lot.
I’ve been looking for this since last week! You’re very helpful in my career sir. I really appreciated it.