By josh / April 4, 2013

Building HTML lists with multi-select in Sublime Text

When you first switch to Sublime Text, it’s easy to miss out on Sublime’s power by using it like your old text editor.

Heck, it’s easy to do even when you’ve used it for a while.

I recently received an email from Sublime user Peter, who was wondering if Sublime allows you to find and replace line ending characters. He’s accustomed to using find and replace to build HTML image tags in his previous editor.

First he’d select a list of image files in Finder, then copy the file names into his editor. Then he’d find and replace every line break with the closing part of his image tag plus a line break. Finally he’d again replace the new line characters with the opening part of his image tag (plus another newline). VoilĂ , a list of image tags!

This same workflow is possible in Sublime using the Replace panel and regular expression mode, so I reflexively answered his question with the following steps:

  1. Open the Replace panel by clicking Find | Replace … .
  2. Enable regular expression mode by clicking the cryptic .* button. (Hover over the buttons to see a tooltip if you’re not sure which is the right one.)
  3. Enter \n in the Find What field. Sublime highlights matches in real time as you enter your search, so you should see selections appear at the end of each line.
  4. Enter your replacement text in the Replace With field.
  5. Click Replace or Replace All to make your substitutions.

Later I realized, though, that Sublime offers a much better way to do this: multi-select.

Here’s how you’d build image tags from a list of file names using multi-select:

  1. Select the file names.
  2. Click Selection | Split into Lines, which gives you a new cursor at the end of each line.
  3. Move the cursors to the beginning of the lines with Home on Windows and Linux or Command+Left Arrow on Mac OS X.
  4. Type the opening portion of the image tag.
  5. Move the cursors to the end of the lines with End on Windows and Linux or Command+Right Arrow on Mac OS X.
  6. Type the closing portion of the image tag.

The moral of the story: When you’re tackling a tricky editing task, don’t forget to step back and ask yourself if Sublime offers any tools that you didn’t have at your disposal last time you solved a similar problem.

For more ways to streamline your Sublime Text workflow, check out:

About the author


skube - September 27, 2014

If you have Emmet installed there is an even easier way:
1. Select list
2. Click Selection | Split into Lines
3. Cut (to remove list leaving as many cursors as list length)
4. Type img (then tab to auto complete)
5. Paste

Click here to add a comment

Leave a comment: