1

How to efficiently generate ordered and unordered list from couple of lines?

Let's say:

list item 1
list item 2
list item 3

into

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ul>
uicoded
  • 111

2 Answers2

3

You can install the Emmet package via Package Control (link) or directly install it by copying the Emmet package files. Then

// don't forget to choose HTML edit mode in the Sublime Text editor

// type 
ul#nav>li.item$*4>a{Item $}
// 1      2     3   4
//1- List ID
//2- class name
//3- list members number
//4- items name

Hit the Tab button and you'll see:

<ul id="nav">
    <li class="item1"><a href="">Item 1</a></li>
    <li class="item2"><a href="">Item 2</a></li>
    <li class="item3"><a href="">Item 3</a></li>
    <li class="item4"><a href="">Item 4</a></li>
</ul>

Right after list creation you also can push Tab to move to next (or previous) items quickly.

nc4pk
  • 9,257
  • 14
  • 61
  • 71
Vlad
  • 31
0

In case the Emmet plugin doesn't suit you, you can try saving the following as a macro and using it. It does not indent and has no error checking, but It does what I needed. (Preferences->Browse Packages open "user" folder make a new folder called something like "ulmaker" and save this as "ulmaker.sublime-macro" inside it. ) Then you can use it from the drop-down (Tools->Macros) or bind it to a key.

(Preferences->Key Bindings User)

{ "keys": ["alt+u", "alt+l"], "command": "run_macro_file", "args": {"file": "Packages/User/ulmaker/ulmaker.sublime-macro"} }

This binds it to a combination where you hold ALT and press u then l.

[
    {
        "args": null,
        "command": "split_selection_into_lines"
    },
    {
        "args":
        {
            "extend": false,
            "to": "bol"
        },
        "command": "move_to"
    },
    {
        "args":
        {
            "characters": "<li"
        },
        "command": "insert"
    },
    {
        "args":
        {
            "characters": ">"
        },
        "command": "insert"
    },
    {
        "args":
        {
            "extend": false,
            "to": "eol"
        },
        "command": "move_to"
    },
    {
        "args":
        {
            "characters": "<"
        },
        "command": "insert"
    },
    {
        "args":
        {
            "characters": "/li"
        },
        "command": "insert"
    },
    {
        "args":
        {
            "characters": ">"
        },
        "command": "insert"
    },
    {
        "args":
        {
            "extend": true,
            "to": "bol"
        },
        "command": "move_to"
    },
    {
        "args": null,
        "command": "cut"
    },
    {
        "args": null,
        "command": "single_selection"
    },
    {
        "args":
        {
            "characters": "<ul"
        },
        "command": "insert"
    },
    {
        "args":
        {
            "characters": ">"
        },
        "command": "insert"
    },
    {
        "args":
        {
            "characters": "\n"
        },
        "command": "insert"
    },
    {
        "args": null,
        "command": "paste"
    },
    {
        "args":
        {
            "characters": "\n<"
        },
        "command": "insert"
    },
    {
        "args":
        {
            "characters": "/ul>"
        },
        "command": "insert"
    }
]

A more experienced person might clean up this code a bit. I just used ctrl+q to record this, then saaved it.

Community
  • 1
TecBrat
  • 148