在 Texmate 中 Tabify / 美化 HTML?

在 Texmate 中 Tabify / 美化 HTML?

如何在 Textmate 中“制表” HTML?

我尝试全选,然后使用 Cmd+option+[ 但结果有点奇怪......

如果无法在 TextMate 中执行此操作,如果有人可以帮助我编写一个 PHP 函数来执行此操作,我就可以制作自己的 TextMate 插件。

<div>                                            
 <div>
  <span>反转系统,1 套</span></div>
  <div>
   <div> </div>
   <span>3.9</span>                         
   <p>(基于
    <span>7</span> 条评论)</p>
    <div>
     <a href="#">
      鏈接</a>
      <div>
       <p>
        <span>分发</span></p>
        <div>
         <ul>
          <里>
           <p>
            <span>5 星</span></p>
            <div>
             <div> </div></div>
             <p>
              <span>(3)</span></p></li>
              <里>
               <p>
                <span>4 星</span></p>
                <div>
                 <div> </div></div>
                 <p>
                  <span>(2)</span></p></li>
                  <里>
                   <p>
                    <span>3 星</span></p>
                    <div>
                     <div> </div></div>
                     <p>
                      <span>(1)</span></p></li>
                      <里>
                       <p>
                        <span>2 星</span></p>
                        <div> </div>
                        <p>
                         <span>(0)</span></p></li>
                         <里>
                          <p>
                           <span>1 星</span></p>
                           <div>
                            <div> </div></div>
                            <p>
                             <span>(1)</span></p></li></ul></div> </div></div></div>
                             <div></div>
                             <div>
                              <p>83%</p>
                              <p>受访者会向朋友推荐此产品。</p></div></div>

如果我使用这个网页:http://tools.arantius.com/tabifier

结果如下:

<div>
 <div>
  <span>反转系统,1 套</span>
 </div>
 <div>
  <div>
   
  </div>
  <span>3.9</span>
  <p>
   (基于 <span>7</span> 条评论)
  </p>
  <div>
   <a href="#">
   鏈接</a>
   <div>
    <p>
     <span>分发</span>
    </p>
    <div>
     <ul>
      <里>
      <p>
       <span>5 星</span>
      </p>
      <div>
       <div>
        
       </div>
      </div>
      <p>
       <span>(3)</span>
      </p>
      </li>
      <里>
      <p>
       <span>4 星</span>
      </p>
      <div>
       <div>
        
       </div>
      </div>
      <p>
       <span>(2)</span>
      </p>
      </li>
      <里>
      <p>
       <span>3 星</span>
      </p>
      <div>
       <div>
        
       </div>
      </div>
      <p>
       <span>(1)</span>
      </p>
      </li>
      <里>
      <p>
       <span>2 星</span>
      </p>
      <div>
       
      </div>
      <p>
       <span>(0)</span>
      </p>
      </li>
      <里>
      <p>
       <span>1 星</span>
      </p>
      <div>
       <div>
        
       </div>
      </div>
      <p>
       <span>(1)</span>
      </p>
      </li>
     </ul>
    </div>
   </div>
  </div>
 </div>
 <div>
 </div>
 <div>
  <p>
   83%
  </p>
  <p>
   的受访者会向朋友推荐此产品。
  </p>
 </div>
</div>

这真是太棒了。我该如何让 TextMate 做到这一点?

答案1

HTML 包包含 HTML Tidy ( Control- Shift- H)。它的功能不只是格式化(例如,关闭标签、修复错误嵌套),因此如果您希望它仅格式化,请进入 Bundles > Bundle Editor > Show Bundle Editor,然后根据需要复制/自定义该命令。

答案2

我通过“谷歌搜索”来到这里,textmate beautifycczona 的答案很有帮助,但我在使用Bundle > HTML > Tidy时遇到了一个问题替换<!DOCTYPE html>使用不同的文档类型。我开始深入研究捆绑代码,但我发现还有另一种方法可以做到仅缩进清理:您只需选择文本并单击Indent Selection菜单即可Text

因此默认情况下是+a然后是left alt++[

这个答案适用于 2014 年及以后使用 TextMate 2 及更高版本的人

相关内容