Redroot Design Notes

Sublime Text 2 - Wrap Lines in HTML Tag

I've recently switched my text editor over to Sublime Text 2, and I'm still learning all of the useful features for rapid web development. This is mostly a reminder to myself (though I know it'll be helpful to others, hence the post) - how to quickly wrap multiple lines of text each with the same HTML tag.

The major use case that pops up again and again for me is a list. A client will send over a document with some new content, I'll paste it into my editor, and then mark it up. Often there will be a bulleted list, which I'll want to mark up with li tags. Here's how to quickly mark up an unordered list.

List Item One
List Item Two
List Item Three
List Item Four

First, select all the lines of text in your list. Then hit cmd-shift-L (replace cmd with ctrl on Windows). This will give you a cursor on each line.

List Item One|
List Item Two|
List Item Three|
List Item Four|

Next, hit ctrl-shft-W (replace ctrl with alt on Windows) to issue the command HTML: Wrap Selection in Tag. If you prefer your mouse, you can also pull up the Command Palette from the Tools menu and search for the same command.

<p|>List Item One</p>
<p|>List Item Two</p>
<p|>List Item Three</p>
<p|>List Item Four</p>

Now you'll have p tags around each line! All you need to do is type li to switch them all to list item tags.

<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
<li>List Item Four</li>

And there you go. Just hit escape to exit multiple cursors mode. This is a tremendous time saver for me, so I hope you find it just as helpful.

Topics include Sublime Text 2