Carbon是在线代码截图工具，不能直接嵌入HTML页面；它不提供API、iframe或SDK，仅生成静态PNG图片，真正在页面内截图需用html2canvas或shiki等纯前端方案。
Carbon 是什么，它能直接嵌入 HTML 页面吗
Carbon 本质上是个在线 Web 应用（carbon.now.sh），不是前端库或 npm 包。它不提供 iframe 嵌入、不开放 API、也不支持直接在你自己的 HTML 页面里调用它的截图逻辑。你看到的“HTML 代码截图”，其实是把你的代码粘贴进 Carbon 网站，它渲染成带主题/字体/边框的图片后，由你手动下载或复制链接——整个过程和你的 HTML 页面完全无关。
- 它生成的是静态
.png图片，不是可交互 DOM 元素 - 没有官方 JS SDK，所谓“集成”都是靠模拟表单提交或拼接 URL 参数（不稳定，且随时可能失效）
- 如果你试图用
fetch或XMLHttpRequest直接请求 Carbon 后端，会遇到 CORS 和身份校验拦截
想在网页里自动截图 HTML 代码片段？试试 client-side 方案
真正能在你自己的 HTML 页面里“实时截图”的，得靠浏览器端渲染 + canvas 截图，比如用 html2canvas 配合预设样式：
- 把要截图的代码块包进一个带 class 的
<pre>或<div>，例如：<pre class="carbon-like"><code>const a = 1</code></pre> - 用 CSS 模拟 Carbon 风格：等宽字体（
font-family: 'Fira Code', monospace）、深色背景（background: #282a36）、浅色文字（color: #f8f8f2）、圆角+阴影（border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.3)） - 引入
html2canvas：<script src="<a href="https://www.php.cn/link/48300fd42032d6e6256e9ee006555ce9">https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js">></a>; - 调用时避开
textarea、iframe等无法渲染的节点，优先截图纯div+pre结构
注意：html2canvas 对 CSS 变量、transform、部分伪元素支持有限，高亮语法若靠 Prism.js 动态插入 <span>，需确保截图前高亮已就绪（加 await new Promise(r => setTimeout(r, 10)) 微延迟）。
为什么别硬套 Carbon 的 URL 参数生成图
有人发现 Carbon 支持类似这样的分享链接：<a href="https://www.php.cn/link/ef5ad26206c0cabf23fec07c2390eeaf">https://www.php.cn/link/ef5ad26206c0cabf23fec07c2390eeaf</a>，就想在自己页面里拼 URL 自动加载。这行不通，因为：
立即学习“前端免费学习笔记（深入）”；
- 这类链接只是“预设参数”，打开后仍需 Carbon 页面完整渲染，不会返回图片资源
- 没有
?export=1或&format=png这类服务端直出参数（Carbon 不提供） - 即使你用 Puppeteer 在服务端访问该 URL 并截图，也违反其
robots.txt和 ToS（明确禁止自动化抓取）
真要批量生成，推荐本地用 playwright 控制 Chromium 打开 Carbon 页面、填入代码、点击下载按钮——但这是服务端脚本行为，和“HTML 页面内实现”是两回事。
最轻量可行的替代：用 shiki + canvas 纯前端生成
如果你只要“看起来像 Carbon”的代码图，且接受 PNG 输出，shiki（VS Code 同源语法高亮）配合 canvas 绘制是目前最可控的方案：
-
shiki可在浏览器中运行（用import('shiki')动态加载） - 它输出带 class 的 HTML 字符串，你把它注入隐藏
<div>，再用html2canvas截图 - 主题选
one-dark-pro，字体设为Fira Code，就能无限接近 Carbon 默认效果 - 关键优势：所有逻辑在前端完成，不依赖外部服务，代码片段不上传，适合敏感场景
但要注意：首次加载 shiki 的 wasm 和主题包约 300KB，冷启动有延迟；如果只截一两种语言，可提前用 shiki/bundle/web 预构建精简版。
Carbon 本身不是工具链一环，而是演示样板。真正在 HTML 页面里做截图，核心矛盾从来不是“怎么美化”，而是“要不要把代码送出浏览器”。一旦决定不出站，就得自己搭渲染+截图闭环——而最容易被跳过的，恰恰是字体加载时机和高亮完成钩子。
