Participant

Answered

Using Emmet with List Order

Forum|Forum|9 years ago
June 25, 2017
3 replies
1371 views

Hello,

I use Emmet alot when I design and I i'm glad to see the Dreamweaver has that feature native. However, one of the commands that I like to use is - "ul>li*". That will allow you to chose multiple list items and wrap a <li> tag around all of them.

How is that done in Dreamweaver? I tried using cmd+T but that didn't seem to work. Unless I'm using it wrong. Please help, this is the one (main) thing that is keeping me from using Dreamweaver as my sole markup tool.

Thanks in advance for your help

This topic has been closed for replies.

Correct answer osgood_

https://forums.adobe.com/people/Nancy+OShea wrote
I can do that in DW too with the tab key.
nav>ul>li*5>a + Tab key
Results:
<nav>
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</nav>

But the OP wants to wrap existing text, like below, not produce empty tags.

So this:

Link 1

Link 2

Link 3

Link 4

Becomes:

<ul>

<li>Link 4</li>

</ul>

In other programs this is achieved by an input box appearing and typing in ul>li* rather than typing it into the editor itself. I'm not sure DW has that option.

I dont think Adobe have got this quite right yet. In Brackets for instance you can select ALL the lines of text and under Emmet choose 'Wrap with Abbreviation' but it just wraps the whole section in just the 1 <li></li> tag. Whereas as you do that in Atom and it wraps each indiviual line in its own <li></li> tag. This also works in Sublime on Mac - control+w, type in ul>li*

Oliver Media GroupAuthor

Participant

This is what I'm talking about

Actions and keyboard shortcuts

Emmet offers many useful and timesaving actions and keyboard shortcuts. Emmet offers unique tools that can greatly improve your editing experience, and is very helpful when you have to edit your HTML and CSS code to fix bugs and add new features. Some of Emmet’s actions are useful for editing existing HTML code, such as the Wrap with Abbreviation function. With this function you can wrap your navigation items in a navigation menu.

wrap with abbreviations

Nancy OShea

Community Expert

I can do that in DW too with the tab key.

nav>ul>li*5>a + Tab key

Results:

<nav>

<ul>

</ul>

</nav>

Nancy O'Shea— Product User & Community Expert

O

osgood_Correct answer

Legend

https://forums.adobe.com/people/Nancy+OShea wrote
I can do that in DW too with the tab key.
nav>ul>li*5>a + Tab key
Results:
<nav>
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</nav>

But the OP wants to wrap existing text, like below, not produce empty tags.

So this:

Link 1

Link 2

Link 3

Link 4

Becomes:

<ul>

<li>Link 4</li>

</ul>

In other programs this is achieved by an input box appearing and typing in ul>li* rather than typing it into the editor itself. I'm not sure DW has that option.

I dont think Adobe have got this quite right yet. In Brackets for instance you can select ALL the lines of text and under Emmet choose 'Wrap with Abbreviation' but it just wraps the whole section in just the 1 <li></li> tag. Whereas as you do that in Atom and it wraps each indiviual line in its own <li></li> tag. This also works in Sublime on Mac - control+w, type in ul>li*

Oliver Media GroupAuthor

Participant

I know this command. I'm looking to do -

line 1

line 2

line 3

line 4

line 5

highlight all th items and wrap all of the with <li> tags. In other editors the command is: ul>li* . How is that done in dreamweaver.

Thanks

O

osgood_

Legend

What editor are you using which allows you to wrap ALL 5 lines in <li></li> tags at once?

I cant do that in Atom, or Sublime or php Storm.

EDIT.

Php Storm can do it using Emmet wrap. Maybe since DW doesnt have the ability any longer to use wrapping snippets you cant do it.

Found out how to do it in Atom too by using wrap in abbreviation.

Sublime escapes me at the moment.

Nancy OShea

Community Expert

type ul>li*5 followed by the Tab key.

Result:

<ul>

</ul>

Nancy O'Shea— Product User & Community Expert

Actions and keyboard shortcuts

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded