htmlemmetadobe-brackets

How to wrap existing html with new tags using Emmet in Brackets

Before I go to write a line of code it will auto complete <h1></h1> which is fine. But if I have an existing block of code how can I highlight the block and insert the tags at the beginning and end? I am using Brackets with the emmet extension.

Solution

  • You are looking for Wrap with Abbreviation:

    Wrap with Abbreviation

    A very powerful tool of the Emmet toolkit. It takes an abbreviation, expands it and places currently selected content in the last element of generated snippet. If there’s no selection, action will silently call “Match Tag Pair” to wrap context element.

    1. Highlight your code block.
    2. Press Shift+Ctrl+A.
    3. Enter an abbreviation, such as div.

    A simple div will make

    <p>test</p>

    to

    <div>
  <p>test</p>
<div>

    The other options on the page are also pretty interesting. The cheat sheet in the docs misses the shortcuts.

    Brackets shows all Emmet shortcuts in the action bar (Strg is Ctrl, Umschalt is Shift):

    enter image description here