How to generate ordered and unordered list from couple lines in Sublime Text

How to generate ordered and unordered list from couple lines in Sublime Text

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>

答案1

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.

答案2

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.

相关内容