Super User is a question and answer site for computer enthusiasts and power users. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

How can I "tabify" HTML in Textmate?

I've tried selecting all, and then using Cmd+option+[ but it comes out a little weird...

If it's not possible to do this in TextMate, if someone could help me write a PHP function to do it, I could potentially make my own TextMate plugin.

<div>                                            
 <div>
  <span>Reversal System, 1 kit</span></div>
  <div>
   <div>&nbsp;</div>
   <span>3.9</span>                         
   <p>(based on 
    <span>7</span> reviews)</p>
    <div>
     <a href="#">
      link</a>
      <div>
       <p>
        <span>Distribution</span></p>
        <div>
         <ul>
          <li>
           <p>
            <span>5 Stars</span></p>
            <div>
             <div>&nbsp;</div></div>
             <p>
              <span>(3)</span></p></li>
              <li>
               <p>
                <span>4 Stars</span></p>
                <div>
                 <div>&nbsp;</div></div>
                 <p>
                  <span>(2)</span></p></li>
                  <li>
                   <p>
                    <span>3 Stars</span></p>
                    <div>
                     <div>&nbsp;</div></div>
                     <p>
                      <span>(1)</span></p></li>
                      <li>
                       <p>
                        <span>2 Stars</span></p>
                        <div>&nbsp;</div>
                        <p>
                         <span>(0)</span></p></li>
                         <li>
                          <p>
                           <span>1 Stars</span></p>
                           <div>
                            <div>&nbsp;</div></div>
                            <p>
                             <span>(1)</span></p></li></ul></div> </div></div></div>
                             <div></div>
                             <div>
                              <p>83%</p> 
                              <p>of respondents would recommend this to a friend.</p></div></div>

If I use this web page: http://tools.arantius.com/tabifier

It comes out like this:

<div>
 <div>
  <span>Reversal System, 1 kit</span>
 </div>
 <div>
  <div>
   &nbsp;
  </div>
  <span>3.9</span>
  <p>
   (based on <span>7</span> reviews)
  </p>
  <div>
   <a href="#">
   link</a>
   <div>
    <p>
     <span>Distribution</span>
    </p>
    <div>
     <ul>
      <li>
      <p>
       <span>5 Stars</span>
      </p>
      <div>
       <div>
        &nbsp;
       </div>
      </div>
      <p>
       <span>(3)</span>
      </p>
      </li>
      <li>
      <p>
       <span>4 Stars</span>
      </p>
      <div>
       <div>
        &nbsp;
       </div>
      </div>
      <p>
       <span>(2)</span>
      </p>
      </li>
      <li>
      <p>
       <span>3 Stars</span>
      </p>
      <div>
       <div>
        &nbsp;
       </div>
      </div>
      <p>
       <span>(1)</span>
      </p>
      </li>
      <li>
      <p>
       <span>2 Stars</span>
      </p>
      <div>
       &nbsp;
      </div>
      <p>
       <span>(0)</span>
      </p>
      </li>
      <li>
      <p>
       <span>1 Stars</span>
      </p>
      <div>
       <div>
        &nbsp;
       </div>
      </div>
      <p>
       <span>(1)</span>
      </p>
      </li>
     </ul>
    </div>
   </div>
  </div>
 </div>
 <div>
 </div>
 <div>
  <p>
   83%
  </p>
  <p>
   of respondents would recommend this to a friend.
  </p>
 </div>
</div>

That's a whole lot nicer. How can I make TextMate do that?

share|improve this question
up vote 1 down vote accepted

The HTML bundle includes HTML Tidy (Control-Shift-H). It does more than format (e.g. closing tags, fixing bad nesting), so if you want it to format-only go into Bundles > Bundle Editor > Show Bundle Editor, and duplicate/customize that command as you see fit.

share|improve this answer

I came here by "googling" textmate beautify and cczona's answer helped, but I faced a problem by using Bundle > HTML > Tidy as it was replacing my <!DOCTYPE html> with different document type. I started digging into the bundle code, however I found out that there's another way to do indention cleanup only: All you have to do is select the text and click on Indent Selection under Text menu.

So it's +a and then left alt++[ by default

This answer is for people in 2014 and plus, using version 2 and higher of TextMate

share|improve this answer

You must log in to answer this question.

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