☰

在 Texmate 中 Tabify / 美化 HTML？

tag-icon • tag-icon php html textmate
在 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 及更高版本的人

相关内容