优雅升级：HTML To Pug模板 — Numio
将 HTML 转换为 Pug（旧称 Jade）模板语法，用缩进代替闭合标签。可在完整文档和 HTML 片段之间切换，并选择制表符、逗号和引号风格。HTML 会发送到服务器进行转换。
基于现有 HTML 标记开始编写 Pug 模板。
处理在浏览器本地完成，输入内容不会上传。输入可能在同一标签页的工具之间保留，共用设备用完后请清空。
适用场景
- 基于现有 HTML 标记开始编写 Pug 模板。
- 在转换整个页面之前，先用短片段检查属性和嵌套如何映射到 Pug。
使用方法
- 粘贴 HTML 或加载示例（HTML fragment、form attributes、HTML document）。加载示例会替换你的输入。
- 开启片段模式，只转换片段本身，不加 html、head 和 body 包裹。下方示例使用片段模式，开启制表符和逗号，关闭双引号。
- 复制 Pug，并用你的 Pug 环境编译，检查渲染出的 HTML。
HTML 输入
<section class="card"><h2>News</h2><p>Registration is open</p></section>
Pug 输出（片段模式，开启制表符和逗号）
section.card h2 News p Registration is open
功能与限制
关闭片段模式时，HTML 会被当作文档处理，可能会添加 html、head 和 body。只需要元素本身时请开启片段模式。
混用制表符和空格可能改变 Pug 中的父子关系。请遵循项目的缩进风格。
重复的 HTML 不会被转换为 Pug 的 each 循环、mixin 或变量，外部 CSS、图片和脚本也不会包含在内。
HTML 解析器可能会修复不完整的标签。转换成功并不代表 HTML 有效，也不保证页面完全相同。
FAQ
为什么会添加 html 和 body 标签？
在文档模式下，解析器会补全外层元素。开启片段模式即可在不加包裹的情况下转换组件的 HTML。
能在 VS Code 或命令行中把 HTML 转为 Pug 吗？
此页面运行的是开源的 html2pug 包。从 npm 安装它，即可在脚本或命令行中转换文件；快速转换片段时也可以继续使用此页面。
如何把 Pug 转回 HTML？
此页面只把 HTML 转换为 Pug。要重新得到 HTML，请用 Pug 本身编译模板，例如使用 pug-cli 包。
我的 HTML 会被上传吗？
会，它会被发送到 douni.one 服务器进行转换。请使用可以分享的代码，并事先删除 API 密钥或客户数据。