代码截图生成器 —— 让代码分享更优雅

在技术社区、博客或社交媒体上分享代码时，一张美观的代码截图往往比纯文本更有吸引力。本工具旨在帮助开发者快速生成专业风格的代码截图，无需任何设计基础。

一、功能介绍

• 多语言支持：自动识别并高亮 JavaScript、Python、PHP、Java、C++、Go、Rust 等 20+ 种编程语言。
• 主题切换：内置多种配色方案（深色、亮色、Monokai、Atom One Dark 等），适应不同偏好。
• 自定义背景：可自由选择背景颜色，与您的博客或社交媒体风格搭配。
• 窗口装饰：可选择显示经典的 macOS 风格三色按钮（红/黄/绿），增加截图质感。
• 字体调节：支持调整代码字体大小，确保在不同场景下清晰可读。
• 高清导出：基于 html2canvas 渲染，输出 2 倍分辨率 PNG，适合印刷或高清显示。

二、使用步骤

1. 在左侧文本框中粘贴或输入您的代码。
2. 选择对应的编程语言（若自动高亮不准确，可手动调整）。
3. 根据需要切换主题、背景色、字体大小，并选择是否显示窗口按钮。
4. 右侧预览区会实时更新效果，满意后点击“下载截图”按钮。
5. 浏览器将自动下载名为 code-screenshot.png 的图片文件。

三、配置选项详解

• 语言：选择代码的语言类型，影响高亮规则。若选择“纯文本”，则仅显示原始文本，不高亮。
• 主题：决定代码颜色风格。深色主题（如 VS2015）适合暗色背景，亮色主题（如 GitHub）适合白色背景。
• 背景色：整个截图区域的底色，建议与主题搭配。
• 窗口按钮：显示/隐藏左上角的红黄绿圆点，模仿代码编辑器窗口。
• 字体大小：调整代码显示尺寸，影响截图清晰度。

四、使用场景

• 技术博客：为文章中的代码片段制作优雅插图。
• 社交媒体：在 Twitter、微博、微信等平台分享代码技巧。
• 文档/教程：在项目文档或教程中插入代码截图，提升可读性。
• 演示幻灯片：将代码截图插入 PPT，比复制文本更醒目。

五、隐私与安全

本工具所有处理均在浏览器端完成，您的代码不会上传至任何服务器，请放心使用。

六、常见问题

• 问：截图背景有阴影吗？
  答：预览区域自带轻微阴影，截图时会包含该阴影，使其更具立体感。
• 问：可以自定义窗口按钮颜色吗？
  答：当前为固定配色（红黄绿），暂不支持自定义，但可隐藏按钮。
• 问：支持哪些代码高亮语言？
  答：支持 highlight.js 官方支持的所有语言，列表中列出的为常用选项，您也可以手动在输入框中指定语言（如 lang-python），但建议从下拉列表选择。

开始使用本工具，让您的代码分享更具专业感和美感！