跳到工具
JoeLucky

点击工具页的「收藏」加入

工具类别

代码截图CSS 渐变生成器玻璃拟态生成器Box Shadow 生成器CSS 加载动画SVG Blob 生成器SVG 转 PNG颜色对比度检查工具PX／REM／EM 转换器
JoeLucky

实用好用的在线工具集合站

隐私政策服务条款

© 2026 JoeLucky®. 版权所有。

  1. JoeLucky
  2. /CSS 与设计
  3. /代码截图

代码截图

将代码转成美观的分享图片，支持多种主题

外框间距40px
背景
预览
javascript.ts
1function greet(name) {
2 // Say hello
3 const msg = `Hello, ${name}!`
4 console.log(msg)
5 return msg
6}

相似CSS 与设计

查看全部
CSS 渐变生成器

可视化设计线性、放射、圆锥渐变，即时复制 CSS 代码

打开 →
玻璃拟态生成器

实时预览玻璃拟态效果，一键复制 CSS 代码

打开 →
Box Shadow 生成器

交互式调整阴影效果，实时预览 CSS 输出

💬 用户留言

?

还没有留言，抢先留下你的想法！

什么是代码截图？

把代码片段转成排版整齐的分享图片，可选择语言、主题、窗口样式与背景，并下载 PNG，适合贴到演示文稿、文档或社交平台。

如何使用？

  1. 将代码粘贴到下方输入框，并在上方“语言”中选择对应语言（JavaScript / TypeScript / Python / CSS / HTML / JSON / Bash / SQL / Rust / Go），语法关键字、字符串、注释会自动着色。
  2. “主题”提供 6 种配色：Dracula（深紫）、One Dark（灰黑）、GitHub Light（白底）、Solarized（深蓝）、Nord（北欧冷色）、Monokai（经典黄绿）。
  3. 开启“窗口样式”后会显示 macOS 红黄绿三个圆形按钮，让截图更接近真实编辑器的外观；“行号”可单独开关。
  4. “外框间距”滑块用于调整代码块与背景渐变之间的留白（16～80px）；“背景”可选 5 种渐变或透明（无背景）。
  5. 预览确认满意后，点击右上角“下载 PNG”即可获得 2× 高分辨率图片，适合贴到 Twitter／LinkedIn／技术文章；“复制代码”则复制纯文本内容。

常见问题

代码截图支持哪些语言？

支持 JavaScript、TypeScript、Python、HTML、CSS、JSON、SQL、Bash、Java、Go 等语法高亮。

导出的截图是什么格式？

PNG 格式（2× 高分辨率），适合博客、演示文稿、社交媒体分享。

可以自定义背景色和窗口样式吗？

可以，提供多种颜色主题、macOS/无框窗口样式、背景色/渐变、行号、外框间距等设置。

打开 →