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

| improve this answer | |
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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.