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。能力全景速览能力说明语法高亮29 套内置主题可自定义配色多语言覆盖 70 种编程语言支持自动识别窗口样式标题栏、红绿灯按钮、圆角、阴影可开关导出分享PNG/SVG 下载、iframe 嵌入、图片 API链接即状态所有配置序列化进 URL发链接即可还原最小上手路径最快的路径是直接用 Web 版线上服务或本地yarn install后yarn dev启动打开编辑器直接粘贴代码或拖拽文件进来也可以在地址栏粘贴 Gist IDCarbon 自动拉取内容左侧面板按需切换主题、字体、窗口样式画面实时更新拖动右侧手柄调整图片宽度点 Copy PNG 或 Copy SVG 完成导出图片已进剪贴板。把配置变成可分享的链接这是 Carbon 最实用的设计每次改动主题、字号、阴影配置都会同步写入 URL 查询参数?t、?bg、?fs等。把地址栏链接发出去别人打开就是同一张图不用附截图说明。进阶定制自定义高亮主题内置 29 套主题不够用时打开主题设置里的创建入口逐一调整 background、keyword、string 等 12 个色板项就能做出贴合个人品牌的配色方案。选中行局部高亮写教程时想突出几行代码点击行号旁的行号即可选中多行Shift 连选选中部分不透明度拉满其余行自动变暗重点一目了然。选中文本单独改样式选中文本后会弹出一个浮动样式条可以单独加粗、斜体、下划线甚至改颜色不用整段重排。项目内窥想理解实现从这几个入口入手components/Carbon.js核心渲染组件基于 CodeMirrorcomponents/Themes/主题选择与自定义创建逻辑lib/routing.jsURL 参数与状态的双向序列化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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考