6 Replies Latest reply on Jun 25, 2017 3:27 PM by osgood_

    Using Emmet with List Order

    Dwayne Oliver

      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

        • 1. Re: Using Emmet with List Order
          Nancy OShea Adobe Community Professional & MVP

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

           

          Result:

          <ul>

              <li></li>

              <li></li>

              <li></li>

              <li></li>

              <li></li>

          </ul>

          • 2. Re: Using Emmet with List Order
            Dwayne Oliver Level 1

            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

            • 3. Re: Using Emmet with List Order
              osgood_ Level 8

              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.

              • 4. Re: Using Emmet with List Order
                Dwayne Oliver Level 1

                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

                • 5. Re: Using Emmet with List Order
                  Nancy OShea Adobe Community Professional & MVP

                  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>

                  1 person found this helpful
                  • 6. Re: Using Emmet with List Order
                    osgood_ Level 8

                    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 1</li>

                    <li>Link 2</li>

                    <li>Link 3</li>

                    <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*

                    2 people found this helpful