piapia123
zh

代码着色(26 种语言)

网络

所有处理都在浏览器本地完成,数据不上传服务器

输入
把文件拖到这里可直接载入
输出

把一段代码染上颜色,方便贴到别处。有两条路径:预览模式下页面直接显示着色后的代码块,选中它复制,浏览器会连样式一起放进剪贴板 —— 粘进 PPT、Word、邮件里颜色都还在,这是最省事的做法,不需要任何特殊操作。HTML 模式则产出一段内联样式的 HTML 源码,粘到博客、静态站点、邮件模板里都能直接用。用内联样式而不是 class,是因为贴过去的地方没有本站的 CSS,`class="hljs-keyword"` 到了那边只是一串没有颜色的字。配色与站内保持一致(亮色 / 暗色两套可选)。

功能

  • 26 种语言:JavaScript、TypeScript、Python、Go、Rust、Java、C++、C#、PHP、Ruby、SQL、YAML、JSON、XML 等
  • 预览模式:选中复制即带颜色,直接粘进 PPT 与 Word
  • HTML 模式:内联样式的 HTML 源码,贴到任何支持 HTML 的地方都有颜色
  • 亮色与暗色两套配色,与站内代码块一致
  • 不需要任何操作就能预览 —— 输入即着色
  • 超过 2 万字符时明确退回纯文本,不会把页面卡住

使用方法

  1. 把代码粘进输入框,选好语言
  2. 预览模式下直接看到着色后的样子
  3. 要贴进 PPT 就选中它复制;要贴进网页就切到 HTML 模式复制源码
  4. HTML 模式可以选亮色或暗色配色

常见问题

怎么把带颜色的代码贴进 PPT?
在预览模式里用鼠标选中着色后的代码块,Ctrl+C(Mac 是 ⌘+C),到 PPT 里直接粘贴 —— 浏览器会把 DOM 连同它的样式一起写进剪贴板,所以颜色会保留。不要用「复制全部」按钮,那个取的是纯文本,贴出来没有颜色。
HTML 模式为什么要用内联样式?
因为贴过去的地方没有本站的 CSS。如果输出的是 `class="hljs-keyword"`,到了你的博客里就只是一串没有颜色的字 —— 高亮器的类名只有在配套样式表存在时才有意义。内联样式把颜色写在每个标签上,到哪里都成立。
支持多少种语言?
26 种,覆盖日常开发用到的主要语言与配置格式。这份清单是按实际体积筛过的:每多注册一种语言的语法,页面就要多下载一份解析规则。所以要加语言之前会先量一下代价(README 里记了方法)。
代码会上传吗?
不会。着色完全在浏览器里完成,页面不发送任何请求 —— 内部代码不会离开这台设备。

相关工具