Faster way to surround a block of HTML with tags, and auto indent?

Right now if I want to surround a block fo HTML with a DIV for example, it takes two steps. I have to wrap the code, and then select it and reformat.

I'm wondering if there's a faster way than this:

(click image below to see animation)

test.gif

5 comments
Comment actions Permalink

I don't use surround, I instead ctrl+x to cut the existing code out, then add my new tag, then ctrl+v to paste the code back inside the new tag. Add enter key if needed for formatting.

1
Comment actions Permalink

Thanks for reminding me of that! I'll give it a shot

0
Comment actions Permalink

In Preferences | Editor | Live Templates | html/xml | T2, you can change the template text from:

<$TAG$>$SELECTION$</$TAGNAME$>

to:

<$TAG$>
$SELECTION$
</$TAGNAME$>
0
Comment actions Permalink

Steps:

  • Make a selection with your keyboard
  • Invoke Surround With (Shift-Ctrl-A Win/Linux, Alt-Cmd-T macOS)

  • Hit T to choose Surround with <tag></tag> in the Live Templates section

  • In the prompt, type the name of the tag

If you're a fan of the Emmet system for quickly generating markup, you can also surround with Emmet.

https://www.jetbrains.com/pycharm/guide/tips/wrap-selection-with-tag/

1

Please sign in to leave a comment.