Skip to main content
Participant
January 7, 2020
Answered

Is there is a keyboard short cut to wrap an element in a <li>?

  • January 7, 2020
  • 3 replies
  • 1746 views

Anyone know if there is a keyboard short cut to wrap an element in a <li> or how to create one like there is one to wrap a <p> around a line of code.

<p> wrap windows: ctrl + shift + p = <p>some text </p>

This topic has been closed for replies.
Correct answer Jon Fritz

You could also create a Wrapping Snippet, for really any tag you use frequently, in CC2015 and older or CC2020 and newer...

1. In the Snippets window, click the New Snippet button
2. Give the Snippet a name and description
3. Select Wrap selection for Snippet Type
4. For Insert Before, add <li>
5. For Insert After, add </li>

From there on out, you can highlight text and then doubleclick the Snippet in the Snippets Window to wrap it. In old versions of DW, you can set whatever keyboard shortcut you like to your Snippets. In versions after CC2015, they can only be set with Snippet Keywords which won't work with Wrapping Snippets, because the function overwrites your highlighted text instead.

3 replies

Nancy OShea
Community Expert
Community Expert
January 7, 2020

I use Emmet short codes to create structure. 

https://docs.emmet.io/cheat-sheet/

 

Let's say I need 5 unordered list items.

Type this code followed by TAB key.

ul>li*5

 

Or navigation links.

nav>ul>li>*5>a{$ item}

 

Emmet short code abbreviations can wrap selected items. See the video examples. 

https://docs.emmet.io/actions/wrap-with-abbreviation/

Unfortunately, Emmet abbreviations (Shift+Ctrl+A) don't do anything in DW.  So I switch to Brackets with the Emmet plugin which does support abbreviations.

https://github.com/emmetio/brackets-emmet

 

Nancy O'Shea— Product User & Community Expert
Jon Fritz
Community Expert
Jon FritzCommunity ExpertCorrect answer
Community Expert
January 7, 2020

You could also create a Wrapping Snippet, for really any tag you use frequently, in CC2015 and older or CC2020 and newer...

1. In the Snippets window, click the New Snippet button
2. Give the Snippet a name and description
3. Select Wrap selection for Snippet Type
4. For Insert Before, add <li>
5. For Insert After, add </li>

From there on out, you can highlight text and then doubleclick the Snippet in the Snippets Window to wrap it. In old versions of DW, you can set whatever keyboard shortcut you like to your Snippets. In versions after CC2015, they can only be set with Snippet Keywords which won't work with Wrapping Snippets, because the function overwrites your highlighted text instead.

Participant
January 7, 2020

Thank you Jon!

Jon Fritz
Community Expert
Community Expert
January 7, 2020

There's no shortcut available for it, I think the closest you'll get would be...

1. Highlight the code you want wrapped
2. Hit Ctrl + T
3. Type l-i
4. Hit enter twice

or

Highlight the text you want to turn into a list item, then click one of the List button in the HTML section of the Properties window. If the text is adjacent to an already existing <ul> or <ol> it will add the highlighted text as an <li> to that list.

Participant
January 7, 2020

Perfect thank you