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?

Tugboat

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*

Zonate

Very nice. It should be noted that you do not have to split the selection into lines first (shift-command-L) as I was doing at first for this to work. In fact, if you do, each line becomes a ul>li. Thanks for a great tip. – Tugboat

Doesn't work in Monterey. 1. "Wrap with abb" is not found in the list 2. Ctrl+W does nothing – Brandy

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.

Singe

Very nice. I use Emmmet but was unaware of this ability. Thanks. – Tugboat

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>.

Rollie

yeah, i was hoping for a single command, as in BBedit where you just select some lines and click. – Tugboat