Inserting an <div>xx</div> using a keyboard shortcut in textmate

Question

One of my most common operations in textmate is to encapsulate a block of text in a <div>.

How can i create a keyboard shortcut for this? I do not really feel like learning anything complex, so simple solutions would work best - thanks!

Answer 1

Maybe I didn't understand your question, but what about the "Wrap Selection in Open/Close Tag" (Ctl-Shift-W) from the HTML bundle? Having a block of text selected then overtyping the default <p> with <div> does the work. See http://manual.macromates.com/en/bundles#html

But the following snippet :

${0:${TM_SELECTED_TEXT/\A(.)<\/div>\z|./(?1:$1:$0<\/div>)/m}}

does the same thing without even typing the tag ...

HTH

Answer 2

This might slightly off topic, but you might be interested in using Zen coding for Textmate, which allows you produce lots of HTML with a few key strokes.

You write:

div#page>div.logo+ul#navigation>li*5>a

You get:

<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <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>
</div>

(disclaimer: the example code is from the above mentioned site)

Besides that it adds features for easy navigation of editable parts of HTML, for easy wrapping of content using the same syntax as above. This last past would allow you to wrap any text (content) in whatever HTML you would like.

Happy coding :)