HTML 自動排版工具 - HTML Tidy (Formatter)

HTML 看到縮成一排, 要拉出來檢查比對, 看看是否有漏掉某些 HTML Tag 得結尾, 有沒有工具可以自動將 HTML 格式化, 做好縮排呢?

HTML Tidy 就可以做這樣子的事, HTML Tidy 可以將 HTML Tag 做巢狀式的 Indent(縮排), 看起來就會清爽許多.

註: HTML Tidy 也可以縮排 XML, XHTML, ASP, PHP ... 等種類的頁面.

Tidy 安裝

  • 套件: tidy - HTML syntax checker and reformatter
  • 安裝: apt-get install tidy

HTML Tidy 參數設定文件

HTML Tidy 參數設定文件, 可參考下述兩種:

  1. HTML Tidy Configuration Options Quick Reference
  2. $ man tidy # 最下面找到 OPTIONS

範例

  • cat index.html | tidy -i -w 0 > index-formatter.html # -w 0 全部列為同一行,不要 80個字元折行

HTML Tidy 參數設定

  • vim ~/.tidy-config

    // config file for HTML tidy
    show-warnings: no
    wrap: 1000
    indent: auto
    indent-spaces: 4
    // indent-attributes: yes
    markup: yes
    output-xml: no
    input-xml: no
    output-xhtml: no
    output-html: yes
    numeric-entities: yes
    quiet: yes
    quote-marks: yes
    quote-nbsp: yes
    quote-ampersand: no
    break-before-br: no
    uppercase-tags: no
    uppercase-attributes: no
    char-encoding: utf8
    input-encoding: utf8
    break-before-br: yes
    // lower-literals: yes
    // drop-proprietary-attributes: yes
    // repeated-attributes: keep-last
    // error-file: errs.txt

Tidy 執行

  • $ tidy -config ~/.tidy-config test.html > formatter.html # formatter.html 就是排版過後的版本

    註:

    • HTML Tidy Indent 只會 indent block-level 的 Tag (depending on whether or not the content includes a block-level element)
    • p, div... 等, 都是 block-level.
    • span, a... 等, 都是 inline-level.

相關網頁

作者: Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.

在〈HTML 自動排版工具 - HTML Tidy (Formatter)〉中有 3 則留言

  1. 我目前都用Visual Studio做開發,從2005版開始還可以做到只針對部份html碼做重新排版。
    精簡版的Web Express也可以做到哦。

  2. 呃, 我不用 Virsual Studio 耶. XD
    在 Windows 的話, 我會推薦用 PsPad, 也可以做這樣子得事情, 而且可以做清楚漂亮得 diff. 🙂

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料