☰

Sublime Text で数行から順序付きリストと順序なしリストを生成する方法

tag-icon • tag-icon sublime-text-2
Sublime Text で数行から順序付きリストと順序なしリストを生成する方法

数行から順序付きリストと順序なしリストを効率的に生成するにはどうすればよいでしょうか?

まあ言ってみれば：

list item 1
list item 2
list item 3

の中へ

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ul>

答え1

Emmetパッケージはパッケージコントロール（リンク）またはEmmetパッケージファイルをコピーして直接インストールします。その後

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

ボタンを押すTabと次の画面が表示されます:

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

リストの作成直後に、押すTabと次の (または前の) 項目にすばやく移動することもできます。

答え2

Emmet プラグインが適さない場合は、次のマクロを保存して使用してみてください。インデントやエラー チェックはありませんが、必要なことは実行できます。([設定] -> [パッケージの参照] で「user」フォルダーを開き、「ulmaker」などの名前の新しいフォルダーを作成し、その中に「ulmaker.sublime-macro」として保存します。) その後、ドロップダウン ([ツール] -> [マクロ]) から使用したり、キーにバインドする。

(設定->キーバインドユーザー)

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

これにより、ALT キーを押しながら u キー、次に 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"
    }
]

より経験豊富な人なら、このコードをもう少し整理するかもしれません。私は ctrl+q を使ってこれを記録し、保存しました。

関連情報