企业官网建设流程全解析

Carbon：三步生成代码截图，还能把每个像素写进 URL

【免费下载链接】carbon:black_heart: Create and share beautiful images of your source code项目地址: https://gitcode.com/gh_mirrors/ca/carbon

给博客配代码图时，终端截图总是丑得没眼看。Carbon 解决的就是这个问题：把源码渲染成带语法高亮、窗口样式的精美图片，支持 29 套内置主题和 70 多种编程语言，改完即所见即所得，还能一键导出 PNG 或 SVG。

能力全景速览

最小上手路径

最快的路径是直接用 Web 版（线上服务或本地yarn install后yarn dev启动）：

1. 打开编辑器，直接粘贴代码，或拖拽文件进来；
2. 也可以在地址栏粘贴 Gist ID，Carbon 自动拉取内容；
3. 左侧面板按需切换主题、字体、窗口样式，画面实时更新；
4. 拖动右侧手柄调整图片宽度；
5. 点 Copy PNG 或 Copy SVG 完成导出，图片已进剪贴板。

把配置变成可分享的链接

这是 Carbon 最实用的设计：每次改动主题、字号、阴影，配置都会同步写入 URL 查询参数（?t=、?bg=、?fs=等）。把地址栏链接发出去，别人打开就是同一张图，不用附截图说明。

进阶定制

自定义高亮主题

内置 29 套主题不够用时，打开主题设置里的"创建"入口，逐一调整 background、keyword、string 等 12 个色板项，就能做出贴合个人品牌的配色方案。

选中行局部高亮

写教程时想突出几行代码？点击行号旁的行号即可选中多行（Shift 连选），选中部分不透明度拉满，其余行自动变暗，重点一目了然。

选中文本单独改样式

选中文本后会弹出一个浮动样式条，可以单独加粗、斜体、下划线甚至改颜色，不用整段重排。

项目内窥

想理解实现，从这几个入口入手：

• components/Carbon.js：核心渲染组件，基于 CodeMirror
• components/Themes/：主题选择与自定义创建逻辑
• lib/routing.js：URL 参数与状态的双向序列化
• lib/constants.js：主题、字体、语言列表的定义处
• pages/api/：图片生成与 oembed 接口

生态与行动

项目采用 MIT 许可证，仓库自带 20 余种语言的 README 翻译，贡献者主要通过 issue 和 PR 参与。想改第一行渲染代码？打开 components/Carbon.js，看看 212 行附近的CodeMirror挂载点，那是整张图的起点。

【免费下载链接】carbon:black_heart: Create and share beautiful images of your source code项目地址: https://gitcode.com/gh_mirrors/ca/carbon