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），并按需切换使用制表符和单引号。 3. 点击转换。 4. 在 Pug 输出卡片上点击复制以复制结果。
Pug 转换规则
缩进使用配置数量的空格或单个制表符。属性值根据单引号选项使用单引号或双引号。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")/。
▶可以在空格和制表符之间选择缩进方式吗？
可以。切换使用制表符以使用制表符缩进，或保持关闭并将缩进大小设置为 1 到 8 之间以控制每级的空格数。
如果这个工具对你有帮助的话，请考虑请我喝杯咖啡。
请给我买杯咖啡吧。