跳到主要内容

HTML 转 Pug — 把标记语言改写成缩进语法

粘贴 HTML 即可得到 Pug(Jade)语法。div 会缩写成 .class,属性与注释保持不变,script 内的代码原样保留,嵌套改用缩进表示。

代码转换
  • 在本机处理
  • 不上传
  • 无需注册
HTMLHTMLPUGPug
HTML输入

HTML → Pug

把 HTML 转换成 Pug 语法。div 会缩写成 .class,注释与 script 内的代码保持原样。

  • 粘贴CtrlV
  • 打开文件拖放进来
PUG结果

结果会显示在这里。

空格:2

全部转换

常见问题

粘贴的代码会发送到服务器吗?
不会。所有转换都在这个浏览器里完成,代码不会发送到任何地方,也不会被保存。公司的源码或配置文件都可以粘贴。浏览器里只会保留你上次打开的转换方向。转换器(编译器)文件本身会从本站下载,但下载之后代码不会离开浏览器。
一个标签里有两个方向,网址怎么算?
每个方向都有自己的网址。Pug ⇄ HTML 这个标签同时对应 /codeconv 和 /codeconv/html-pug,按设置栏中间的 ⇄ 按钮时,画面和网址会一起改变。所以你可以把当前方向直接作为链接发出去,按返回键也会回到上一个方向。按 ⇄ 时如果已有结果,结果会被放进反方向的输入框,方便马上确认转换回来是否一致。
想一眼看清这里都能转换什么。
点标签栏最右边的“全部转换”,就会按标记、样式、脚本、数据四组列出全部十六个方向。需要下载转换器的方向会标出体积(例如 694KB),点进去之前就知道要不要等一会儿。本站任意页面都能用的 Ctrl/⌘+K 也可以直接跳到某个转换。
为什么 Pug 的 extends、include 和 Sass 的 @use、@import 不能用?
这些语句要去读取其他文件,而浏览器没有可访问的文件系统。放到服务器上当然可以,但那就得把代码发出去,本工具不走那条路。把原本要引入的文件内容直接粘贴到同一个编辑框里就能照常转换。Less 的 @import 也是同样的情况。
CSS 转 SCSS 时会把颜色和尺寸抽成变量吗?
刻意不抽。它只整理嵌套。哪些值该做成变量,是项目的设计规范该决定的事;自动抽取只会得到 $color-1、$size-3 这类看不出含义的名字,反而更难读。var(--x) 这样的 CSS 变量也原样保留——换成 SCSS 变量后值会在构建时固定下来,运行时切换主题就失效了。CSS → Less 也是同样的规则。
把 CSS 转成 SCSS 后,样式会和原来不一样吗?
不会变。它只是把选择器折叠成嵌套,顺序和含义都不变,媒体查询、!important 与 @font-face 原样保留。用逗号连起来的选择器(.a, .b)会整体保留,因为拆开会复制声明。我们的测试也会把生成的 SCSS 再编译回 CSS,确认含义一致。你也可以用设置栏的 ⇄ 按钮自己验证。
TypeScript 转换会一并检查类型错误吗?
不会。本工具只负责去除类型(Sucrase)。想确认类型是否正确,请使用编辑器或 tsc --noEmit。换来的是速度和体积——带类型检查的编译器有好几 MB,对网页来说下载负担太大。namespace、declare module 这类纯类型语法可能会被清空或原样保留。
HTML → JSX 的结果可以直接粘进 React 吗?
多数情况可以。class 变成 className,for 变成 htmlFor,style 字符串变成对象,注释变成 {/* */},stroke-width 这类 SVG 属性也改为驼峰写法。不过 onclick="save()" 这种属性会被包成 () => { save() },因为 React 只接受函数——而那个函数必须存在于你的组件里。value、checked 如果原样保留,输入框就变成改不动的受控组件,需要你决定是否改成 defaultValue、defaultChecked。这些地方转换后问题面板都会提示。
JSON → CSV 的结果用 Excel 打开后中文乱码。
那是因为你把屏幕上的结果复制到纯文本编辑器再保存,Excel 便无从知道文件是 UTF-8。用下载按钮得到的文件带有 BOM,直接打开就不会乱码。嵌套的值会展开成 a.b 形式的列,含有逗号、引号或换行的值会按规范加引号,所以列不会错位。反过来,从 Excel 复制的表格可以直接粘到 CSV → JSON 方向——用制表符分隔的内容也能自动识别。
JSON → TypeScript 生成的类型可靠吗?
类型是根据你粘贴的值推断出来的,所以建议过一遍。数组里的对象会全部扫描:只有部分对象才有的键会加上 ?,出现过 null 的值会加上 | null。即便如此,现在是数字的字段,真实响应里也可能是 null 或字符串。嵌套对象会按键名单独声明(address → Address),名字重复时在后面加编号。
为什么只有 SCSS 和 Less 的转换打开得慢一点?
因为它们用的是真正的编译器。dart-sass 压缩后约 694KB,less.js 约 53KB。没有理由让每位访客都背上这些,所以只有第一次使用该方向时才下载,之后浏览器会记住,再打开就很快。相比之下,JSON、CSV、XML、HTML → Pug、HTML → JSX 完全不需要额外下载,断网也能用。
JSX 的转换结果能直接在浏览器里运行吗?
还需要你自己引入 React。本工具只是把 JSX 语法改写成 createElement 调用,既不会把多个文件打包成一个,也不会为旧浏览器降级语法。import 语句原样保留,输出可以直接交给 Vite、webpack 这类打包工具。如果需要 React 17 起使用的自动运行时,请把运行时设置改成 automatic。

相关工具