Command to convert selected lines to HTML bulleted list in Sublime Text?

Question

Whenever I have a series of lines that are supposed to be a bulleted list (UL) in Sublime Text 3, I need to repeat these steps:

1. Select the lines
2. Use "split selection into lines (shift-command-L)
3. Wrap selection with tag (ctrl-W) and type LI
4. Re-select the 4 lines
5. Wrap selection again with UL this time (or just manually type UL and /UL)

This is tedious. Does anyone know of a built-in command, a plug-in, or a macro that will take selected lines, wrap each line with an LI tag and the selection with the UL tags in one go?

Answer 1

If you are using a mac:

• Shift+Cmd+P: Command Palette
• Filter the list with "wrap with abb"
• Notice the input box at the bottom of the window
• Type and enter: ul>li*

Also, one can select the text and press Ctrl+W and use ul>li*

Answer 2

You can easily achieve this if you have the Emmet plugin installed. The feature that you're after is called "Wrap with abbreviation".

Steps needed:

1. Select the block of text
2. Press CTRL+SHIFT+G (on Windows), and;
3. enter ul>li* in the input field that opens up at the bottom of the window (same as where "Find" comes up).
4. Profit! :)

It's also possible to do some further cool stuff using filters with this as well. Be sure to check out the Emmet docs.

Answer 3

Use multiline select to insert </li><li> before every line. Remove all line breaks and add a line break after every </li>. Then manually wrap the result in <ul></ul>. It should work and look okay to the eye.

Or use the Emmet plugin to make a list like this: ul>li*40, press ctrl+e or tab, and multiline-select copypaste the desired text to <li>here</li>.