實用工具
輸入
結果
結果會顯示在這裡。伺服器端算繪的網頁、電子郵件範本，以及從爬蟲取得的 HTML，通常都擠成一長行。這裡用 js-beautify 的 HTML 美化工具替標記重新縮排，並把每個行內的 <script> 與 <style> 區塊交給它的 JavaScript 和 CSS 格式化工具處理，讓嵌入的程式碼也變得可讀。對空白敏感的元素會被尊重：<pre> 與 <textarea> 的內容完全保持原樣，<b>、<a> 這類行內元素則留在它們所在的那行文字中。
它是怎麼運作的
- 過長的行會在你指定的欄數換行；設為 0 則永不換行。
- 屬性預設留在標籤那一行，也可以每個屬性一行——對齊排列，或讓結尾的角括號單獨一行。
- <head> 與 <body> 預設與 <html> 對齊，這是常見的慣例；開啟縮排選項會讓它們內縮一層。
你的資料去了哪裡
哪也沒去。本工具完全在你的瀏覽器裡執行：你貼上的文字由頁面處理，不會傳輸到任何伺服器，也不會寫進任何紀錄。
本工具免費且免登入，執行結果只存在於你目前的頁面裡，不會被儲存到任何地方。
它要花多少
本工具完全免費，不需要登入，也不消耗點數。
常見問題
- 格式化會改變網頁的呈現方式嗎？
- 幾乎在所有情況下都不會。區塊元素之間的空白不影響版面，行內元素會留在原本那一行，文字之間不會多出空隙。<pre> 與 <textarea> 中的內容空白是可見的，所以絕不會被更動。
- 能處理 JSX、Vue 或 Handlebars 範本嗎？
- js-beautify 能識別 Handlebars 的 {{ }} 和 Django 風格的 {% %} 標籤，足以讓它們保持完整。JSX 與 Vue 單一檔案元件則需要能真正解析它們的格式化工具，例如 Prettier，否則其中嵌入的運算式可能會被錯誤地調整空白。
- 為什麼輸出的巢狀結構還是錯的？
- 美化工具只會替輸入的內容重新縮排，並不會修復它。一個未關閉的 <div> 會被當成仍然開啟來縮排，因此輸出的縮排會準確地顯示錯誤出在哪裡。如果需要正式的判定，請使用 W3C 驗證器。
背後的開源專案
本工具執行在 beautifier/js-beautify 之上，以 MIT 授權發布。如果你需要在自己的程式裡實作同樣的能力，直接用這個函式庫。
beautifier/js-beautify也常被稱作
- html 格式化
- html 美化
- html 線上格式化
- html pretty print
- html 縮排
- html formatter