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.

相關網頁

• Clean up your Web pages with HTML TIDY
• HTML Tidy Online
• Cleanup your HTML - Vim Tips Wiki

作者: Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活. 檢視「Tsung」的全部文章