Sublime Forum

Wrapping HTML tags around existing text

#1

I am looking to replace a very simple but powerful HTML editor (carousel) used to hand code HTML. (It won’t work on Windows 7, 10.) Is there a way for sublime text to allow highlighting plain text, then choosing a tag which automaticall surrounds it with opening and closing tags. Ideally e.g., I’d like to highlight a text list and be able to convert it to an ordered or unordered list by a few keystrokes.

Some text
Some more text
Some different text
etc.

to this

  • Some text
  • Some more text
  • Some different text etc.

Is there a way for snippets to do this? E.g., highlight a few paragraphs of text and automatically surround it with

and
(or whatever tag I want)?
0 Likes
#2

to wrap the selection with a single tag, use Edit -> Tag -> Wrap selection with tag, and type the tag you want if not the default. using multiple selections will let you wrap many lines at once.

3 Likes
#3

Thanks. That works for a simple open and close tag. Is there a way to get this to work with a snippet to get it to populate a list? Otherwise I am faced with creating the list, then copying and pasting each list item.

0 Likes
#4

You can open Preferences > Browse Packages... and then open or create the folder User and inside that a file html_wrap_list.sublime-snippet with the content:

<snippet>
    <content><![CDATA[
<${1:ul}>
<li>${SELECTION/\n/<\/li>\n<li>/g}</li>
</$1>
]]></content>
    <description>Wrap as List</description>
    <scope>text.html</scope>
</snippet>

You can access the snippet via ctrl+shift+p and then write Snippet: Wrap as List and press enter. This can also bound to a keybinding or a menu entry.

3 Likes
#5

Wow! I am really impressed. Thanks very much!. Is there any documentation somewhere that would explain how you coded it? I plan to experiment to see if I can figure it out. Obviously I am not a programmer but I do OK with HTML.

0 Likes
#6

The Unofficial Documentation contains a page on snippets that should come in handy for grokking snippets in general and what this is doing in particular.

This particular (awesome) example uses a substitution on the selected text to work it’s magic in a way that would not have occurred to me, so double kudos to @r-stein for the tip.

0 Likes
#7

Thanks again for the help.

0 Likes