HTML转Pug格式工具
免费在线使用 HTML转Pug格式工具 无需安装即可使用工具
關於 HTML 轉 Pug
使用瀏覽器 DOMParser 將 HTML 標記轉換為 Pug（原 Jade）模板語法。轉換器生成簡潔的 Pug 簡寫：當 div 標籤帶有 class 或 id 時會省略 div 標籤名，class 變為 .class 選擇器，id 變為 #id 選擇器，其餘屬性則放在括號中輸出。
使用方法
1. 將 HTML 貼上到 HTML 輸入文字框中。 2. 設定縮排大小（1-8），並按需切換使用 Tab 和單引號。 3. 點擊轉換。 4. 在 Pug 輸出卡片上點擊複製以複製結果。
Pug 轉換規則
縮排使用設定數量的空格或單一 Tab。屬性值根據單引號選項使用單引號或雙引號。class 和 id 屬性被轉換為 .class / #id 簡寫並從屬性清單中移除；style 屬性以 style="..." 形式保留在括號之後。無子節點的空元素（img、br、input、hr、meta、link 等）以尾部 / 自閉合。單一文字子節點內嵌放置在標籤之後；多個子節點巢狀於後續行中。獨立文字節點以豎線（| ）作為前綴。
▶<div class="card highlight" id="main"> 元素如何轉換？
因為標籤是 div，所以標籤名被省略，元素在 Pug 簡寫中變為 #main.card.highlight，先使用 id 再使用帶點的 class。
▶內聯 style 屬性是否保留？
是的。style 屬性不會包含在括號屬性清單中；而是以 style="<value>"（如果開啟了單引號選項則用單引號）的形式附加在括號之後。
▶自閉合和空元素如何處理？
無子節點的已知空元素（area、base、br、col、embed、hr、img、input、link、meta、param、source、track、wbr）以尾部斜線輸出，例如 img(src="x.png")/。
▶可以在空格和 Tab 之間選擇縮排方式嗎？
可以。切換使用 Tab 以使用 Tab 縮排，或保持關閉並將縮排大小設定為 1 到 8 之間以控制每級的空格數。
如果这个工具对你有帮助，请考虑请我喝杯咖啡。
請幫我買杯咖啡吧。