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 參數設定文件, 可參考下述兩種:
- HTML Tidy Configuration Options Quick Reference
- $ 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.