Code Screenshot

代码截图工具可将源代码片段转换为美观的代码截图，支持多种编程语言的语法高亮、多种主题配色（如暗色/亮色主题）、自定义窗口样式（macOS 风格的红黄绿按钮等），以及多种导出格式（PNG、SVG）。该工具帮助开发者在社交媒体、博客文章或演示文稿中优雅地展示代码。

代码截图在技术内容分享中大量使用：在 Twitter/X 或微博上分享代码片段时避免字符限制和格式丢失、撰写技术博客时为代码添加视觉吸引力的配图、制作技术演讲的 PPT 时嵌入代码示例、在技术文档中替代纯文本代码块提升美观度、以及在 Stack Overflow 上回答问题时提供格式良好的代码展示。

代码格式化可先使用 JSON 格式化器 或其他格式化工具。Markdown 预览器 可预览带语法高亮的代码块。图片格式转换器 可在生成后转换截图格式。SVG 优化器 可优化 SVG 格式的代码截图。

代码截图工具通常使用语法高亮库（如 Shiki、Prism、Highlight.js）解析代码并生成带语法标记的 token 列表，然后将 token 映射到主题颜色，再使用 Canvas API（对于 PNG）或 SVG 渲染（对于矢量格式）将带颜色的文本绘制到指定的窗口框架内。阴影、圆角、水印等效果通过 Canvas 的 filter 和 compositing 操作实现。

• 分辨率：PNG 格式的截图在 Retina 屏幕上可能需要 2x 或 3x 输出才能保持清晰。建议使用 SVG 格式避免分辨率问题。
• 代码长度：超长代码行可能被截断或需要水平滚动，设计截图时应考虑目标平台的显示尺寸限制。
• 语法高亮准确性：某些新语言特性或混合语言代码（如 JSX、Vue SFC）的高亮可能不完美。
• 特殊字符：部分主题或渲染器可能对特殊 Unicode 字符（如 emoji、全角字符）渲染不佳。

在社交媒体分享代码、创建技术博客配图或制作演讲材料时使用此工具。适合需要视觉美化的代码展示场景。对于需要在 CI/CD 或文档生成管道中自动生成代码截图的场景，推荐使用 carbon-now-cli 或 Carbonara 等命令行工具，它们支持批量生成和自动化工作流集成。