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 class="brush:php;toolbar:false;"></pre>或<div>，例如：<code><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="@#@#@#@#@#@#@#@#@#@0;%20%20 - %E8%B0%83%E7%94%A8%E6%97%B6%E9%81%BF%E5%BC%80%20
textarea%E3%80%81iframe%20%E7%AD%89%E6%97%A0%E6%B3%95%E6%B8%B2%E6%9F%93%E7%9A%84%E8%8A%82%E7%82%B9%EF%BC%8C%E4%BC%98%E5%85%88%E6%88%AA%E5%9B%BE%E7%BA%AF%20div%20+%20pre%20%E7%BB%93%E6%9E%84%20%20
%E6%B3%A8%E6%84%8F%EF%BC%9Ahtml2canvas%20%E5%AF%B9%20CSS%20%E5%8F%98%E9%87%8F%E3%80%81transform%E3%80%81%E9%83%A8%E5%88%86%E4%BC%AA%E5%85%83%E7%B4%A0%E6%94%AF%E6%8C%81%E6%9C%89%E9%99%90%EF%BC%8C%E9%AB%98%E4%BA%AE%E8%AF%AD%E6%B3%95%E8%8B%A5%E9%9D%A0%20Prism.js%20%E5%8A%A8%E6%80%81%E6%8F%92%E5%85%A5%20<span>%EF%BC%8C%E9%9C%80%E7%A1%AE%E4%BF%9D%E6%88%AA%E5%9B%BE%E5%89%8D%E9%AB%98%E4%BA%AE%E5%B7%B2%E5%B0%B1%E7%BB%AA%EF%BC%88%E5%8A%A0%20await%20new%20Promise(r%20=>%20setTimeout(r,%2010))%20%E5%BE%AE%E5%BB%B6%E8%BF%9F%EF%BC%89%E3%80%82
%E4%B8%BA%E4%BB%80%E4%B9%88%E5%88%AB%E7%A1%AC%E5%A5%97%20Carbon%20%E7%9A%84%20URL%20%E5%8F%82%E6%95%B0%E7%94%9F%E6%88%90%E5%9B%BE
%E6%9C%89%E4%BA%BA%E5%8F%91%E7%8E%B0%20Carbon%20%E6%94%AF%E6%8C%81%E7%B1%BB%E4%BC%BC%E8%BF%99%E6%A0%B7%E7%9A%84%E5%88%86%E4%BA%AB%E9%93%BE%E6%8E%A5%EF%BC%9A@#@#@#@#@#@#@#@#@#@1%EF%BC%8C%E5%B0%B1%E6%83%B3%E5%9C%A8%E8%87%AA%E5%B7%B1%E9%A1%B5%E9%9D%A2%E9%87%8C%E6%8B%BC%20URL%20%E8%87%AA%E5%8A%A8%E5%8A%A0%E8%BD%BD%E3%80%82%E8%BF%99%E8%A1%8C%E4%B8%8D%E9%80%9A%EF%BC%8C%E5%9B%A0%E4%B8%BA%EF%BC%9A
- %E8%BF%99%E7%B1%BB%E9%93%BE%E6%8E%A5%E5%8F%AA%E6%98%AF%E2%80%9C%E9%A2%84%E8%AE%BE%E5%8F%82%E6%95%B0%E2%80%9D%EF%BC%8C%E6%89%93%E5%BC%80%E5%90%8E%E4%BB%8D%E9%9C%80%20Carbon%20%E9%A1%B5%E9%9D%A2%E5%AE%8C%E6%95%B4%E6%B8%B2%E6%9F%93%EF%BC%8C%E4%B8%8D%E4%BC%9A%E8%BF%94%E5%9B%9E%E5%9B%BE%E7%89%87%E8%B5%84%E6%BA%90%20%20
- %E6%B2%A1%E6%9C%89%20
?export=1%20%E6%88%96%20&format=png%20%E8%BF%99%E7%B1%BB%E6%9C%8D%E5%8A%A1%E7%AB%AF%E7%9B%B4%E5%87%BA%E5%8F%82%E6%95%B0%EF%BC%88Carbon%20%E4%B8%8D%E6%8F%90%E4%BE%9B%EF%BC%89%20%20 - %E5%8D%B3%E4%BD%BF%E4%BD%A0%E7%94%A8%20Puppeteer%20%E5%9C%A8%E6%9C%8D%E5%8A%A1%E7%AB%AF%E8%AE%BF%E9%97%AE%E8%AF%A5%20URL%20%E5%B9%B6%E6%88%AA%E5%9B%BE%EF%BC%8C%E4%B9%9F%E8%BF%9D%E5%8F%8D%E5%85%B6%20
robots.txt%20%E5%92%8C%20ToS%EF%BC%88%E6%98%8E%E7%A1%AE%E7%A6%81%E6%AD%A2%E8%87%AA%E5%8A%A8%E5%8C%96%E6%8A%93%E5%8F%96%EF%BC%89%20%20
%E7%9C%9F%E8%A6%81%E6%89%B9%E9%87%8F%E7%94%9F%E6%88%90%EF%BC%8C%E6%8E%A8%E8%8D%90%E6%9C%AC%E5%9C%B0%E7%94%A8%20playwright%20%E6%8E%A7%E5%88%B6%20Chromium%20%E6%89%93%E5%BC%80%20Carbon%20%E9%A1%B5%E9%9D%A2%E3%80%81%E5%A1%AB%E5%85%A5%E4%BB%A3%E7%A0%81%E3%80%81%E7%82%B9%E5%87%BB%E4%B8%8B%E8%BD%BD%E6%8C%89%E9%92%AE%E2%80%94%E2%80%94%E4%BD%86%E8%BF%99%E6%98%AF%E6%9C%8D%E5%8A%A1%E7%AB%AF%E8%84%9A%E6%9C%AC%E8%A1%8C%E4%B8%BA%EF%BC%8C%E5%92%8C%E2%80%9CHTML%20%E9%A1%B5%E9%9D%A2%E5%86%85%E5%AE%9E%E7%8E%B0%E2%80%9D%E6%98%AF%E4%B8%A4%E5%9B%9E%E4%BA%8B%E3%80%82
%E6%9C%80%E8%BD%BB%E9%87%8F%E5%8F%AF%E8%A1%8C%E7%9A%84%E6%9B%BF%E4%BB%A3%EF%BC%9A%E7%94%A8%20shiki%20+%20canvas%20%E7%BA%AF%E5%89%8D%E7%AB%AF%E7%94%9F%E6%88%90
%E5%A6%82%E6%9E%9C%E4%BD%A0%E5%8F%AA%E8%A6%81%E2%80%9C%E7%9C%8B%E8%B5%B7%E6%9D%A5%E5%83%8F%20Carbon%E2%80%9D%E7%9A%84%E4%BB%A3%E7%A0%81%E5%9B%BE%EF%BC%8C%E4%B8%94%E6%8E%A5%E5%8F%97%20PNG%20%E8%BE%93%E5%87%BA%EF%BC%8Cshiki%EF%BC%88VS%20Code%20%E5%90%8C%E6%BA%90%E8%AF%AD%E6%B3%95%E9%AB%98%E4%BA%AE%EF%BC%89%E9%85%8D%E5%90%88%20canvas%20%E7%BB%98%E5%88%B6%E6%98%AF%E7%9B%AE%E5%89%8D%E6%9C%80%E5%8F%AF%E6%8E%A7%E7%9A%84%E6%96%B9%E6%A1%88%EF%BC%9A
shiki%20%E5%8F%AF%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E8%BF%90%E8%A1%8C%EF%BC%88%E7%94%A8%20import('shiki')%20%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BD%EF%BC%89%20%20- %E5%AE%83%E8%BE%93%E5%87%BA%E5%B8%A6%20class%20%E7%9A%84%20HTML%20%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%8C%E4%BD%A0%E6%8A%8A%E5%AE%83%E6%B3%A8%E5%85%A5%E9%9A%90%E8%97%8F%20
<div>%EF%BC%8C%E5%86%8D%E7%94%A8%20html2canvas%20%E6%88%AA%E5%9B%BE%20%20 - %E4%B8%BB%E9%A2%98%E9%80%89%20
one-dark-pro%EF%BC%8C%E5%AD%97%E4%BD%93%E8%AE%BE%E4%B8%BA%20Fira%20Code%EF%BC%8C%E5%B0%B1%E8%83%BD%E6%97%A0%E9%99%90%E6%8E%A5%E8%BF%91%20Carbon%20%E9%BB%98%E8%AE%A4%E6%95%88%E6%9E%9C%20%20 - %E5%85%B3%E9%94%AE%E4%BC%98%E5%8A%BF%EF%BC%9A%E6%89%80%E6%9C%89%E9%80%BB%E8%BE%91%E5%9C%A8%E5%89%8D%E7%AB%AF%E5%AE%8C%E6%88%90%EF%BC%8C%E4%B8%8D%E4%BE%9D%E8%B5%96%E5%A4%96%E9%83%A8%E6%9C%8D%E5%8A%A1%EF%BC%8C%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5%E4%B8%8D%E4%B8%8A%E4%BC%A0%EF%BC%8C%E9%80%82%E5%90%88%E6%95%8F%E6%84%9F%E5%9C%BA%E6%99%AF%20%20
%E4%BD%86%E8%A6%81%E6%B3%A8%E6%84%8F%EF%BC%9A%E9%A6%96%E6%AC%A1%E5%8A%A0%E8%BD%BD%20shiki%20%E7%9A%84%20wasm%20%E5%92%8C%E4%B8%BB%E9%A2%98%E5%8C%85%E7%BA%A6%20300KB%EF%BC%8C%E5%86%B7%E5%90%AF%E5%8A%A8%E6%9C%89%E5%BB%B6%E8%BF%9F%EF%BC%9B%E5%A6%82%E6%9E%9C%E5%8F%AA%E6%88%AA%E4%B8%80%E4%B8%A4%E7%A7%8D%E8%AF%AD%E8%A8%80%EF%BC%8C%E5%8F%AF%E6%8F%90%E5%89%8D%E7%94%A8%20shiki/bundle/web%20%E9%A2%84%E6%9E%84%E5%BB%BA%E7%B2%BE%E7%AE%80%E7%89%88%E3%80%82
Carbon%20%E6%9C%AC%E8%BA%AB%E4%B8%8D%E6%98%AF%E5%B7%A5%E5%85%B7%E9%93%BE%E4%B8%80%E7%8E%AF%EF%BC%8C%E8%80%8C%E6%98%AF%E6%BC%94%E7%A4%BA%E6%A0%B7%E6%9D%BF%E3%80%82%E7%9C%9F%E6%AD%A3%E5%9C%A8%20HTML%20%E9%A1%B5%E9%9D%A2%E9%87%8C%E5%81%9A%E6%88%AA%E5%9B%BE%EF%BC%8C%E6%A0%B8%E5%BF%83%E7%9F%9B%E7%9B%BE%E4%BB%8E%E6%9D%A5%E4%B8%8D%E6%98%AF%E2%80%9C%E6%80%8E%E4%B9%88%E7%BE%8E%E5%8C%96%E2%80%9D%EF%BC%8C%E8%80%8C%E6%98%AF%E2%80%9C%E8%A6%81%E4%B8%8D%E8%A6%81%E6%8A%8A%E4%BB%A3%E7%A0%81%E9%80%81%E5%87%BA%E6%B5%8F%E8%A7%88%E5%99%A8%E2%80%9D%E3%80%82%E4%B8%80%E6%97%A6%E5%86%B3%E5%AE%9A%E4%B8%8D%E5%87%BA%E7%AB%99%EF%BC%8C%E5%B0%B1%E5%BE%97%E8%87%AA%E5%B7%B1%E6%90%AD%E6%B8%B2%E6%9F%93+%E6%88%AA%E5%9B%BE%E9%97%AD%E7%8E%AF%E2%80%94%E2%80%94%E8%80%8C%E6%9C%80%E5%AE%B9%E6%98%93%E8%A2%AB%E8%B7%B3%E8%BF%87%E7%9A%84%EF%BC%8C%E6%81%B0%E6%81%B0%E6%98%AF%E5%AD%97%E4%BD%93%E5%8A%A0%E8%BD%BD%E6%97%B6%E6%9C%BA%E5%92%8C%E9%AB%98%E4%BA%AE%E5%AE%8C%E6%88%90%E9%92%A9%E5%AD%90%E3%80%82
%0A">
