19

Does Textmate have a function to nicely indent HTML?

HTML Tidy indents it - but it seems to delete tags as well. (This isn't completely proper HTML, but still!)

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:tal="http://xml.zope.org/namespaces/tal" xmlns:metal="http://xml.zope.org/namespaces/metal">
    <head>
        <title></title>
    <script type="text/javascript" src="http://www.speechapi.com/static/lib/swfobject.js"></script>
    <script type="text/javascript" src="http://www.speechapi.com/static/lib/speechapi-1.1.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<body>
    <!-- All above disappears -->       
    <p>Test</p>
    <!-- All below disappears-->
</body>
</html>
Improve this question
10
  • Can you give an example of html where tags are deleted as this is surprising
    – mmmmmm
    Commented Oct 16, 2010 at 9:37
  • @Mark: Updated with code
    – Casebash
    Commented Oct 16, 2010 at 11:06
  • @Casebash I tried Tidy with your code and for me it only added tags. copypastecode.com/46216
    – Robert S Ciaccio
    Commented Oct 16, 2010 at 14:52
  • @calvera: Ensure your document type is set to HTML, not plain text
    – Casebash
    Commented Oct 17, 2010 at 0:39
  • 3
    @Casebash: it was set to html... FYI, from what I remember about the Tidy plugin for Notepad++, it's configured via a text file. So maybe there's something wrong with the Tidy configuration.
    – Robert S Ciaccio
    Commented Oct 20, 2010 at 20:24

6 Answers 6

Reset to default
21

You can press ⌘+A to select all then Text->Indent Selection.

Improve this answer
2
  • Years of TextMate and never seen or used this feature... \o/
    – brasofilo
    Commented Oct 9, 2013 at 21:09
  • Unfortunately this is not a full XML formatting: it keeps mis-indented lines and does not split up tags on the same line onto separate lines. Using Textmate 2.0-rc.4.
    – Alexander Klimetschek
    Commented Mar 22, 2017 at 21:20
16

You can use Bundles > HTML > Tidy or the shortcut ctrl+⇧+H.

Improve this answer
3
  • 3
    Tidy doesn't just indent it - it also seems to delete parts of it as well!
    – Casebash
    Commented Oct 16, 2010 at 6:05
  • 1
    Question was about indenting not tidying
    – tig
    Commented Jul 24, 2012 at 15:47
  • Tidying also fails when there are some issues like unknown element names.
    – Alexander Klimetschek
    Commented Mar 22, 2017 at 21:17
1

I'd like to point out something that crosses a bit the other answers:

If you select the text that you wish to format (or reindent), TextMate will apply specific actions only to that. So, if you CMD+A your document and then apply Tidy (either from the Bundles > HTML menu or with the CTRL+SHIFT+H shortcut) it will mostly only do indenting, skipping alerts on validations (that sometimes are unnecessary since we might be working on page snippets).

Improve this answer
0

You can use Xcode or Dashcode instead if you install the Developer Tools. They come free on the install discs that came with your computer. I believe both Xcode and Dashcode have syntax highlighting.

If you want really good software, get Coda. It is a bit pricey at $100, but I would definitely say it is worth it. It has syntax highlighting and (the big part for me) autocompletion.

Improve this answer
0

Yes. The Tidy call in TextMate's built-in HTML bundle can deal with your HTML.

TextMate's Bundles -> HTML -> Tidy produces:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:tal="http://xml.zope.org/namespaces/tal" xmlns:metal="http://xml.zope.org/namespaces/metal">
    <head>
        <title></title>
        <script type="text/javascript" src="http://www.speechapi.com/static/lib/swfobject.js">
</script>
        <script type="text/javascript" src="http://www.speechapi.com/static/lib/speechapi-1.1.js">
</script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
    </head>
    <body>
        <!-- All above disappears -->
        <p>
            Test
        </p><!-- All below disappears-->
    </body>
</html>

On your sample code. Nothing disappeared. You also get the following warnings:

line 1 column 1 - Warning: missing <!DOCTYPE> declaration
line 2 column 5 - Warning: <body> isn't allowed in <head> elements
line 1 column 1 - Warning: <html> proprietary attribute "xmlns:tal"
line 1 column 1 - Warning: <html> proprietary attribute "xmlns:metal"
Improve this answer
0

The problem I experienced with the built-in Text -> Indent Selection or Tidy solution is that it doesn't play well with partial HTML code. This is for example important when editing in WordPress or working with partials in Ruby on Rails.

The solution that worked for me was to add a command to the bundle with a custom Perl script by John Watson that I found here: http://snipplr.com/view.php?codeview&id=28256

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .