Text Mate Short Cuts

General HTML/CSS hotkeys

Ctrl-Shift-W
Wrap block of text in HTML tags. Defaults to <p>, but you can then type the name of the tag you want and it will take care of the opening and closing tags.

Ctrl-Shift-Cmd-W
Same as above but for multiple lines of text. Excellent for creating lists, or pre-processing lots of paragraphs. Defaults to <li> but can be changed immediately after (same as above).

Ctrl-Return
Quickly insert a <br /> tag. 

Ctrl-Shift-L
Copy a link from a web browser, putting it on the clipboard. Then select text or an image and hit this key combo to insert a link to that URL.

Ctrl-Opt-Cmd-P
View the current document in a web browser preview window (uses Safari's WebKit rendering engine). The nice thing about this built-in previewer is that you never need to reload it - the preview updates in real-time as you type.

Cmd-Shift-C
Make sure your cursor is in a "context" (place) where a color value can be inserted. Then hit this key combo to bring up the OS X color picker for quick hexadecimal color values.

Ctrl-Shift-V
Run document through the W3C validation service.

Ctrl-Shift-H
Run document through the HTML Tidy engine to clean up messy code. Tip: Select a portion of code first, and Tidy will only run against the selected code, not the whole document.

Ctrl-Cmd-T
Perhaps the greatest TextMate hotkey of them all - raises a small panel into which you can type a search term for quick reference to all of TextMate's built-in hotkeys and code completion snippets. Try it!

Tag inserts/snippets

TextMate can fill out "template" code for many common tasks. Try typing any of these words at the left margin of an HTML document and hitting the Tab key:

lorem --> Creates filler lorem ipsum text
table --> Creates a basic HTML table
div --> Creates a basic div, ready to take an ID name
style --> Creates a CSS style block in the document context
link --> Creates a link tag reference for attaching an external stylesheet (not for creating clickable links!)
movie --> Creates embed code for QuickTime movies

You can create your own snippets for any kind of text you need to insert on a regular basis - see TextMate's "Bundle Editor" for examples.

CSS code completion

In the context of a CSS document or a CSS block, type a property name then hit Tab to see a list of available properties or property sets. For example, from within a CSS block, type border and then hit the Tab key. You'll get a panel showing a bunch of pre-fab border options. Select one to insert appropriate code.

  • 1 Users Found This Useful
Was this answer helpful?

Related Articles

Styling Telephone Numbers

One of my common sense design tricks is to stlye phone numbers so that when a user click on the...

Make copyright link in the footer.

Have you ever visited those site that seem old because when you get to the footer it has a year...