Carbon 源码截图美化指南从代码导入、个性化定制到导出分享的完整实战【免费下载链接】carbon:black_heart: Create and share beautiful images of your source code项目地址: https://gitcode.com/gh_mirrors/ca/carbon本文以 Carbon 官方乌兹别克语版 READMEdocs/README.uz.md为骨架结合当前仓库源码系统讲解如何把源码转换成漂亮的分享图片包括三种代码导入方式、语法主题/窗口/背景/字体等个性化参数、URL 参数配置以及 PNG/SVG 导出、Twitter 一键分享、Snippet 保存与 iframe 嵌入等完整工作流。读完本文你将掌握 Carbon 从粘贴代码到产出成品图的完整闭环并能利用其可分享 URL 参数实现可复现的代码卡片。项目简介为什么需要 Carbon在 Twitter 等平台上我们经常看到开发者分享自己写的代码截图。代码本身固然精彩但在美学呈现上往往还有提升空间。Carbon 正是为了解决这一痛点而诞生——它让从源码创建并分享漂亮图片这件事变得极其简单。从当前仓库可以确认Carbon 是一个基于 Next.js React CodeMirror 构建的 Web 应用见 package.json采用 MIT 许可LICENSE核心运行环境要求 Node 12。整个项目围绕一个核心交互在浏览器中编辑代码实时渲染出带语法高亮的精美图片再通过各种渠道导出或分享。核心特性一览原文档归纳了 Carbon 的三大特性仓库源码lib/api.js、lib/routing.js印证了这些能力的具体实现GitHub gist 导入只需把 gist 的 ID 追加到 URL 上即可把远端 gist 代码载入编辑器。个性化定制语法配色、窗口样式、背景、字体、行号、阴影等均可自由调整。轻松分享保存图片到本地或一键分享到 Twitter。此外英文版 README.md 与源码还支持Snippet 保存注册账号后可保存代码片段分享的链接能在 Twitter、Slack 等平台上自动展开预览图。导入代码的三种方式原文档指出向 Carbon 导入代码有以下几种途径其背后的实现可以从源码中得到印证把文件直接拖拽到编辑器上文件会被读取并转换为可编辑代码仓库中通过 lib/util.js 的fileToDataURL等工具处理文件读取。在 URL 末尾追加 GitHub gist ID例如carbon.now.sh/gist_id如carbon.now.sh/3208813b324d82a9ebd197e4b1c3bae8。源码层面lib/routing.js 的getRouteState会解析路径末尾的参数——凡是长度不小于 19 个字符且不含点号的路径段都会被当作 gist ID 或 snippet ID 处理pages/[id].js 再据此通过api.snippet.get拉取远端内容并渲染进编辑器。直接复制粘贴或动手输入编辑器本质上是 CodeMirror见 components/Carbon.js随时可编辑。个性化定制把代码导入编辑器后就可以对画面进行全方位调整。原文档提到的可定制项包括语法配色、背景颜色、窗口结构等结合源码lib/constants.js 的DEFAULT_SETTINGS实际可调项远比这丰富定制项默认值说明语法主题themeseti内置约 30 套配色如 Monokai、Dracula、Night Owl、Nord、One Dark、Verminal、Solarized 等窗口主题windowThemenone窗口控制栏外观可选sharp、bw等背景颜色backgroundColorrgba(171, 184, 195, 1)纯色背景也可切换为图片背景backgroundMode字体fontFamilyHack内置 13 种等宽字体Anonymous Pro、Cascadia Code、Fira Code、JetBrains Mono、IBM Plex Mono、Source Code Pro、Space Mono 等字号fontSize14px代码字号行高lineHeight133%代码行高内边距pv/ph56px/56px垂直/水平留白阴影dropShadowtrue代码块投影偏移 20px、模糊 68px行号lineNumbersfalse是否显示行号起始行号firstLineNumber默认 1窗口控制windowControlstrue是否显示 macOS 风格的红黄绿窗口按钮与标题栏导出尺寸exportSize2x可选 1x / 2x / 4x 倍率水印watermarkfalse右下角 Carbon 水印方形图squaredImagefalse输出正方形构图URL 参数可分享、可复现的配置Carbon 的每个配置项都能映射为 URL 查询参数映射关系定义在 lib/routing.js。这意味着你可以把定制好的样式通过链接分享任何打开该链接的人都会看到完全相同的效果URL 参数含义类型bg背景颜色stringt语法主题stringwt窗口主题stringl语言stringwidth画布宽度intds是否启用阴影booldsyoff阴影垂直偏移stringdsblur阴影模糊半径stringwc是否显示窗口控制按钮boolwa宽度自适应boolpv/ph垂直/水平内边距stringln是否显示行号boolfl起始行号intfm/fs/lh字体 / 字号 / 行高stringsi是否方形图booles导出尺寸stringwm是否显示水印boolsl高亮选中行逗号分隔intArraycopy/readonly嵌入时是否可复制 / 只读boolcode代码内容decodetb窗口标题栏文本decode例如?tdraculalpythonfmFira%20Codefs16pxlntrue就能渲染出一张 Dracula 配色、Fira Code 字体、带行号的 Python 代码图。注意 URL 长度有 4000 字符的软限制见 lib/routing.js超长代码建议改用 Snippet 或 gist 方式分享。预设风格仓库还在 lib/constants.js 内置了 8 套一键预设对应 public/static/presets 下的缩略图覆盖黑色商务风、亮色卡通风、复古终端风等适合快速起步再微调。导出与分享下载图片Carbon 支持将图片导出为PNG和SVG两种格式见 components/ExportMenu.js并提供了快捷操作Export → PNG或Export → SVG直接下载Export → Open在浏览器新标签页中打开成品图快捷键⌘⇧E快速导出 PNG、⌘⇧S快速导出 SVG可自定义文件名默认carbon与导出倍率1x/2x/4x。一键分享到 Twitter点击 Tweet 按钮会走 lib/api.js 中的tweet流程先把图片数据上传到后端/api/twitter拿到带altText的图片 URL 后再打开 Twitter 的intent/tweet窗口。该流程会自动为图片编码无障碍alt文本方便屏幕阅读器用户。如果遇到 Twitter 限流HTTP 420文档提示可稍后再试或手动保存上传。保存 Snippet 并分享链接Snippet 是分享的进阶形态——分享链接后平台Twitter、Slack会自动展开图片预览同时访客还能通过链接查看源码点击 Sign in/Sign up 登录后端使用 Firebase 认证见 lib/client.js正常编辑即可内容会自动保存源码中snippet.create带 5 秒防抖、snippet.update带 1 秒防抖见 lib/api.js复制浏览器地址栏的 URL 分享出去即可。若想修改已分享的 snippet直接打开自己的链接编辑即可。Snippet 的增删改查接口都封装在 lib/api.js 的api.snippet对象中。嵌入到自己的网站或博客Carbon 官方推荐用嵌入方式把代码图放进自己的站点pages/embed/index.js 实现了独立的嵌入渲染页pages/embed/[id].js 支持嵌入已保存的 snippet 或 gist。嵌入时可通过copy、readonly参数控制访客能否复制/编辑代码页面加载后通过postMessage把自身高度通知给父页面实现 iframe 自适应见 pages/embed/index.js。读者在嵌入页点击即可一键复制代码。桌面离线使用PWA如果你使用 Chrome 等支持渐进式 Web 应用PWA的浏览器可以把 Carbon 安装为桌面应用离线使用访问carbon.now.sh→ 打开浏览器设置菜单 → 点击 Install Carbon...。仓库依赖中确实包含next-pwa见 package.json印证了 PWA 离线能力。社区生态围绕 Carbon 已经形成了一个活跃的社区生态原文档列举了以下几类项目以下为文字描述可在各编辑器市场或 GitHub 搜索同名项目编辑器插件IntelliJ IDEA 的carbon-now-sh右键菜单打开选中代码、Atom 的carbon-now-shshift-cmd-A、VS Code 的carbon-now-shcarbon命令、Sublime Text 3 的carbonSublime自定义快捷键、Vim/Neovim 的vim-carbon-now-shCarbonNowSh()函数、Emacs 的carbon-now-sh.elcarbon-now-sh交互函数。CLIcarbon-now-cli支持在命令行打开文件或直接下载图片具备交互模式与选择性高亮能力。库R 语言的carbonate可以在 R 环境中反复调整图片属性再打开 Carbon 或直接下载。引用计算机科学教材《CS 101 – An Introduction to Computational Thinking》中使用了 Carbon 生成的代码图。作者、贡献与许可Carbon 由 Mike Fix、Brian Dennis、Jake Dexheimer 三位开发者发起见 docs/README.uz.md 的ijodkorlar一节并采用 all-contributors 规范记录了来自社区的众多贡献者。项目欢迎 Pull Request任何改进都值得提交。项目以MIT 许可证开源LICENSE你可以自由查看、安装、运行与二次开发。本地运行如果你想在本地把玩或二次开发可以基于 package.json 的脚本执行npm install # 安装依赖 npm run dev # 启动 Next.js 开发服务器 npm run build # 生产构建 npm start # 启动生产服务 npm run test:e2e # 运行 Cypress 端到端测试配置见 cypress/config.json前提是本机 Node 版本不低于 12。启动后即可在本地复现上述全部功能导入代码、调参、导出、分享一应俱全。小结Carbon 的完整工作流可以概括为导入 → 定制 → 导出/分享三步通过拖拽、gist URL 或直接输入导入代码借助 30 套语法主题、13 种等宽字体、窗口与背景样式以及可分享的 URL 参数完成视觉定制最后通过 PNG/SVG 下载、Twitter 一键分享、Snippet 链接或 iframe 嵌入把作品传播出去。无论是技术博客配图、社交媒体分享还是团队内部的知识沉淀Carbon 都是一套开箱即用的源码美图解决方案。【免费下载链接】carbon:black_heart: Create and share beautiful images of your source code项目地址: https://gitcode.com/gh_mirrors/ca/carbon创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Carbon 源码截图美化指南：从代码导入、个性化定制到导出分享的完整实战
Carbon 源码截图美化指南从代码导入、个性化定制到导出分享的完整实战【免费下载链接】carbon:black_heart: Create and share beautiful images of your source code项目地址: https://gitcode.com/gh_mirrors/ca/carbon本文以 Carbon 官方乌兹别克语版 READMEdocs/README.uz.md为骨架结合当前仓库源码系统讲解如何把源码转换成漂亮的分享图片包括三种代码导入方式、语法主题/窗口/背景/字体等个性化参数、URL 参数配置以及 PNG/SVG 导出、Twitter 一键分享、Snippet 保存与 iframe 嵌入等完整工作流。读完本文你将掌握 Carbon 从粘贴代码到产出成品图的完整闭环并能利用其可分享 URL 参数实现可复现的代码卡片。项目简介为什么需要 Carbon在 Twitter 等平台上我们经常看到开发者分享自己写的代码截图。代码本身固然精彩但在美学呈现上往往还有提升空间。Carbon 正是为了解决这一痛点而诞生——它让从源码创建并分享漂亮图片这件事变得极其简单。从当前仓库可以确认Carbon 是一个基于 Next.js React CodeMirror 构建的 Web 应用见 package.json采用 MIT 许可LICENSE核心运行环境要求 Node 12。整个项目围绕一个核心交互在浏览器中编辑代码实时渲染出带语法高亮的精美图片再通过各种渠道导出或分享。核心特性一览原文档归纳了 Carbon 的三大特性仓库源码lib/api.js、lib/routing.js印证了这些能力的具体实现GitHub gist 导入只需把 gist 的 ID 追加到 URL 上即可把远端 gist 代码载入编辑器。个性化定制语法配色、窗口样式、背景、字体、行号、阴影等均可自由调整。轻松分享保存图片到本地或一键分享到 Twitter。此外英文版 README.md 与源码还支持Snippet 保存注册账号后可保存代码片段分享的链接能在 Twitter、Slack 等平台上自动展开预览图。导入代码的三种方式原文档指出向 Carbon 导入代码有以下几种途径其背后的实现可以从源码中得到印证把文件直接拖拽到编辑器上文件会被读取并转换为可编辑代码仓库中通过 lib/util.js 的fileToDataURL等工具处理文件读取。在 URL 末尾追加 GitHub gist ID例如carbon.now.sh/gist_id如carbon.now.sh/3208813b324d82a9ebd197e4b1c3bae8。源码层面lib/routing.js 的getRouteState会解析路径末尾的参数——凡是长度不小于 19 个字符且不含点号的路径段都会被当作 gist ID 或 snippet ID 处理pages/[id].js 再据此通过api.snippet.get拉取远端内容并渲染进编辑器。直接复制粘贴或动手输入编辑器本质上是 CodeMirror见 components/Carbon.js随时可编辑。个性化定制把代码导入编辑器后就可以对画面进行全方位调整。原文档提到的可定制项包括语法配色、背景颜色、窗口结构等结合源码lib/constants.js 的DEFAULT_SETTINGS实际可调项远比这丰富定制项默认值说明语法主题themeseti内置约 30 套配色如 Monokai、Dracula、Night Owl、Nord、One Dark、Verminal、Solarized 等窗口主题windowThemenone窗口控制栏外观可选sharp、bw等背景颜色backgroundColorrgba(171, 184, 195, 1)纯色背景也可切换为图片背景backgroundMode字体fontFamilyHack内置 13 种等宽字体Anonymous Pro、Cascadia Code、Fira Code、JetBrains Mono、IBM Plex Mono、Source Code Pro、Space Mono 等字号fontSize14px代码字号行高lineHeight133%代码行高内边距pv/ph56px/56px垂直/水平留白阴影dropShadowtrue代码块投影偏移 20px、模糊 68px行号lineNumbersfalse是否显示行号起始行号firstLineNumber默认 1窗口控制windowControlstrue是否显示 macOS 风格的红黄绿窗口按钮与标题栏导出尺寸exportSize2x可选 1x / 2x / 4x 倍率水印watermarkfalse右下角 Carbon 水印方形图squaredImagefalse输出正方形构图URL 参数可分享、可复现的配置Carbon 的每个配置项都能映射为 URL 查询参数映射关系定义在 lib/routing.js。这意味着你可以把定制好的样式通过链接分享任何打开该链接的人都会看到完全相同的效果URL 参数含义类型bg背景颜色stringt语法主题stringwt窗口主题stringl语言stringwidth画布宽度intds是否启用阴影booldsyoff阴影垂直偏移stringdsblur阴影模糊半径stringwc是否显示窗口控制按钮boolwa宽度自适应boolpv/ph垂直/水平内边距stringln是否显示行号boolfl起始行号intfm/fs/lh字体 / 字号 / 行高stringsi是否方形图booles导出尺寸stringwm是否显示水印boolsl高亮选中行逗号分隔intArraycopy/readonly嵌入时是否可复制 / 只读boolcode代码内容decodetb窗口标题栏文本decode例如?tdraculalpythonfmFira%20Codefs16pxlntrue就能渲染出一张 Dracula 配色、Fira Code 字体、带行号的 Python 代码图。注意 URL 长度有 4000 字符的软限制见 lib/routing.js超长代码建议改用 Snippet 或 gist 方式分享。预设风格仓库还在 lib/constants.js 内置了 8 套一键预设对应 public/static/presets 下的缩略图覆盖黑色商务风、亮色卡通风、复古终端风等适合快速起步再微调。导出与分享下载图片Carbon 支持将图片导出为PNG和SVG两种格式见 components/ExportMenu.js并提供了快捷操作Export → PNG或Export → SVG直接下载Export → Open在浏览器新标签页中打开成品图快捷键⌘⇧E快速导出 PNG、⌘⇧S快速导出 SVG可自定义文件名默认carbon与导出倍率1x/2x/4x。一键分享到 Twitter点击 Tweet 按钮会走 lib/api.js 中的tweet流程先把图片数据上传到后端/api/twitter拿到带altText的图片 URL 后再打开 Twitter 的intent/tweet窗口。该流程会自动为图片编码无障碍alt文本方便屏幕阅读器用户。如果遇到 Twitter 限流HTTP 420文档提示可稍后再试或手动保存上传。保存 Snippet 并分享链接Snippet 是分享的进阶形态——分享链接后平台Twitter、Slack会自动展开图片预览同时访客还能通过链接查看源码点击 Sign in/Sign up 登录后端使用 Firebase 认证见 lib/client.js正常编辑即可内容会自动保存源码中snippet.create带 5 秒防抖、snippet.update带 1 秒防抖见 lib/api.js复制浏览器地址栏的 URL 分享出去即可。若想修改已分享的 snippet直接打开自己的链接编辑即可。Snippet 的增删改查接口都封装在 lib/api.js 的api.snippet对象中。嵌入到自己的网站或博客Carbon 官方推荐用嵌入方式把代码图放进自己的站点pages/embed/index.js 实现了独立的嵌入渲染页pages/embed/[id].js 支持嵌入已保存的 snippet 或 gist。嵌入时可通过copy、readonly参数控制访客能否复制/编辑代码页面加载后通过postMessage把自身高度通知给父页面实现 iframe 自适应见 pages/embed/index.js。读者在嵌入页点击即可一键复制代码。桌面离线使用PWA如果你使用 Chrome 等支持渐进式 Web 应用PWA的浏览器可以把 Carbon 安装为桌面应用离线使用访问carbon.now.sh→ 打开浏览器设置菜单 → 点击 Install Carbon...。仓库依赖中确实包含next-pwa见 package.json印证了 PWA 离线能力。社区生态围绕 Carbon 已经形成了一个活跃的社区生态原文档列举了以下几类项目以下为文字描述可在各编辑器市场或 GitHub 搜索同名项目编辑器插件IntelliJ IDEA 的carbon-now-sh右键菜单打开选中代码、Atom 的carbon-now-shshift-cmd-A、VS Code 的carbon-now-shcarbon命令、Sublime Text 3 的carbonSublime自定义快捷键、Vim/Neovim 的vim-carbon-now-shCarbonNowSh()函数、Emacs 的carbon-now-sh.elcarbon-now-sh交互函数。CLIcarbon-now-cli支持在命令行打开文件或直接下载图片具备交互模式与选择性高亮能力。库R 语言的carbonate可以在 R 环境中反复调整图片属性再打开 Carbon 或直接下载。引用计算机科学教材《CS 101 – An Introduction to Computational Thinking》中使用了 Carbon 生成的代码图。作者、贡献与许可Carbon 由 Mike Fix、Brian Dennis、Jake Dexheimer 三位开发者发起见 docs/README.uz.md 的ijodkorlar一节并采用 all-contributors 规范记录了来自社区的众多贡献者。项目欢迎 Pull Request任何改进都值得提交。项目以MIT 许可证开源LICENSE你可以自由查看、安装、运行与二次开发。本地运行如果你想在本地把玩或二次开发可以基于 package.json 的脚本执行npm install # 安装依赖 npm run dev # 启动 Next.js 开发服务器 npm run build # 生产构建 npm start # 启动生产服务 npm run test:e2e # 运行 Cypress 端到端测试配置见 cypress/config.json前提是本机 Node 版本不低于 12。启动后即可在本地复现上述全部功能导入代码、调参、导出、分享一应俱全。小结Carbon 的完整工作流可以概括为导入 → 定制 → 导出/分享三步通过拖拽、gist URL 或直接输入导入代码借助 30 套语法主题、13 种等宽字体、窗口与背景样式以及可分享的 URL 参数完成视觉定制最后通过 PNG/SVG 下载、Twitter 一键分享、Snippet 链接或 iframe 嵌入把作品传播出去。无论是技术博客配图、社交媒体分享还是团队内部的知识沉淀Carbon 都是一套开箱即用的源码美图解决方案。【免费下载链接】carbon:black_heart: Create and share beautiful images of your source code项目地址: https://gitcode.com/gh_mirrors/ca/carbon创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考