Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

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

2 Answers 2

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

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.