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>
10
  • Can you give an example of html where tags are deleted as this is surprising
    – mmmmmm
    Oct 16, 2010 at 9:37
  • @Mark: Updated with code
    – Casebash
    Oct 16, 2010 at 11:06
  • @Casebash I tried Tidy with your code and for me it only added tags. copypastecode.com/46216 Oct 16, 2010 at 14:52
  • @calvera: Ensure your document type is set to HTML, not plain text
    – Casebash
    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. Oct 20, 2010 at 20:24

6 Answers 6

21

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

2
  • Years of TextMate and never seen or used this feature... \o/
    – brasofilo
    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. Mar 22, 2017 at 21:20
16

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

3
  • 3
    Tidy doesn't just indent it - it also seems to delete parts of it as well!
    – Casebash
    Oct 16, 2010 at 6:05
  • 1
    Question was about indenting not tidying
    – tig
    Jul 24, 2012 at 15:47
  • Tidying also fails when there are some issues like unknown element names. 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).

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.

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

This site is temporarily in read-only mode and not accepting new answers.

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