CodeCard
在浏览器中 100% 本地将您的代码片段转换为精美、易于分享的屏幕截图卡片。
6 行 · 把源码文件拖到这里，或直接粘贴代码。
也可以点击预览中的行号。Shift+点击选择范围，Alt+点击反选，右键清除。
实时预览
工作原理
粘贴或拖入代码
直接输入、粘贴，或拖入源码文件。拖入的文件会先等待：显示大小和行数，按下按钮前不会加载。
设置样式并选出关键行
十种主题、九种渐变或自定义颜色、五种窗口外框。点击行号即可突出该行并让其余变暗。
导出或转给下一个工具
支持 PNG、JPEG、WebP 和矢量 SVG，最高 4 倍。可直接复制到剪贴板，也可不下载就转给 CompressSnap、CropSnap 或 WatermarkSnap。
真正的语法高亮，48 种语言
高亮读取 Prism 的原始词法流，因此 JavaScript、Rust、Zig、Terraform、Dockerfile 以及另外 43 种语言都能得到正确配色 — 而且只下载你选中的那套语法。
突出真正重要的行
点击行号即可高亮该行并让其余变暗。Shift+点击选择范围，Alt+点击反转整个选区，右键清除。
不会被裁掉任何内容的导出
截图前会按完整宽度测量卡片，所以长行能完整保留，而不是在预览边缘被切断。支持 PNG、JPEG、WebP 或矢量 SVG，最高 4 倍。
本地运行，而且真的能离线
字体和语法都由本站提供，不走第三方 CDN。页面加载完成后，断网也能高亮和导出。
常见问题解答
为什么在别的工具里我的长行会被截断?+
因为大多数工具是按当前排版原样截取 DOM 的，而带横向滚动条的代码块只会排版可见的那一段。CodeCard 在截图前会按完整的、未被裁切的宽度测量卡片。
怎么高亮指定的行?+
在预览中点击行号即可高亮该行并让其余变暗。Shift+点击扩展范围，Alt+点击反转整个选区，右键清除。你也可以直接输入 3, 7-9, 12 这样的范围。
支持哪些语言?+
48 种，包括 JavaScript、TypeScript、JSX/TSX、Python、Rust、Go、Zig、C、C++、C#、Java、Kotlin、Swift、Ruby、PHP、SQL、YAML、TOML、Terraform、Dockerfile、Bash、PowerShell、Markdown 和 unified diff。只会下载你选中语言的那套语法。
CodeCard 可以离线使用吗?+
可以。等宽字体和语法都由本站提供，而不是第三方 CDN，所以页面加载完成后，即使断网也能继续高亮和导出。
我的代码安全吗?+
你的代码不会被传输到任何地方。高亮、排版和图像渲染全部在你的浏览器里完成，不上传也不记录。
哪个导出设置最清晰?+
位图用途选 PNG 的 3 倍或 4 倍。如果目标支持矢量，请选 SVG：任意尺寸都清晰，而且通常比 4 倍 PNG 更小。
在线创建精美的代码屏幕截图图片
在社交媒体或演示文稿中分享纯文本代码片段通常比较枯燥。CodeCard 可以立即将您的源代码转换为高颜值的卡片。通过控制边距、阴影、字体和窗口样式，让图片完美契合您的个人品牌。
- PNG、JPEG、WebP 和矢量 SVG，最高 4 倍
- 字体与语法自托管，可离线使用
- 无需账号，水印默认关闭
快速安全的本地渲染
CodeCard 完全运行在您的浏览器中，使用客户端渲染技术，代码和图片绝不会离开您的计算机。
社交媒体、博客和幻灯片的完美搭档
非常适合 Twitter/X 上的技术博主、撰写技术文章的开发者以及制作 PPT 演示的教师。精美的视觉效果可以成倍提升互动率。
严格的隐私保证
与将您的代码发送到云端 API 处理的工具不同，CodeCard 在您的浏览器本地完成所有语法上色和排版生成。您的私钥、敏感配置或代码资产保持 100% 安全。
基于 Prism 的词法流构建
CodeCard 不索取现成的 HTML，而是读取原始词法流并逐行重建代码。正因如此才能做到精确行号、逐行高亮、悬挂缩进换行，以及不被裁切的导出。