可嵌入编辑器
可嵌入代码编辑器
适用于任何网站的在线代码编辑器：一段 iframe，无需配置。
把一个真正能运行的代码编辑器放进你的博客、文档或教程。读者可以直接在你的页面上写代码、看输出，由 Coddy 提供支持。在下方选择语言和主题，粘贴初始代码，然后复制 iframe 即可。
从 Trinket 过来的？看看 Coddy 能替代什么
<figure style="margin:0;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden"><iframe src="https://coddy.tech/embed-editor?lang=swiftui&theme=light&code=aW1wb3J0IFN3aWZ0VUkKCnN0cnVjdCBUb2RvSXRlbTogSWRlbnRpZmlhYmxlIHsKICAgIGxldCBpZCA9IFVVSUQoKQogICAgdmFyIHRpdGxlOiBTdHJpbmcKICAgIHZhciBkb25lID0gZmFsc2UKfQoKc3RydWN0IENvbnRlbnRWaWV3OiBWaWV3IHsKICAgIEBTdGF0ZSBwcml2YXRlIHZhciBpdGVtcyA9IFsKICAgICAgICBUb2RvSXRlbSh0aXRsZTogIlJ1biBTd2lmdFVJIGluIHRoZSBicm93c2VyIiwgZG9uZTogdHJ1ZSksCiAgICAgICAgVG9kb0l0ZW0odGl0bGU6ICJUYXAgYSB0YXNrIHRvIGNoZWNrIGl0IG9mZiIpLAogICAgICAgIFRvZG9JdGVtKHRpdGxlOiAiQWRkIGEgdGFzayBvZiB5b3VyIG93biIpLAogICAgXQogICAgQFN0YXRlIHByaXZhdGUgdmFyIG5ld1RpdGxlID0gIiIKCiAgICB2YXIgcmVtYWluaW5nOiBJbnQgewogICAgICAgIGl0ZW1zLmZpbHRlciB7ICEkMC5kb25lIH0uY291bnQKICAgIH0KCiAgICB2YXIgYm9keTogc29tZSBWaWV3IHsKICAgICAgICBOYXZpZ2F0aW9uU3RhY2sgewogICAgICAgICAgICBMaXN0IHsKICAgICAgICAgICAgICAgIFNlY3Rpb24oIlwocmVtYWluaW5nKSBsZWZ0IHRvIGRvIikgewogICAgICAgICAgICAgICAgICAgIEZvckVhY2goJGl0ZW1zKSB7ICRpdGVtIGluCiAgICAgICAgICAgICAgICAgICAgICAgIFRvZ2dsZShpdGVtLnRpdGxlLCBpc09uOiAkaXRlbS5kb25lKQogICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgIFNlY3Rpb24gewogICAgICAgICAgICAgICAgICAgIEhTdGFjayB7CiAgICAgICAgICAgICAgICAgICAgICAgIFRleHRGaWVsZCgiTmV3IHRhc2siLCB0ZXh0OiAkbmV3VGl0bGUpCiAgICAgICAgICAgICAgICAgICAgICAgIEJ1dHRvbigiQWRkIikgewogICAgICAgICAgICAgICAgICAgICAgICAgICAgaXRlbXMuYXBwZW5kKFRvZG9JdGVtKHRpdGxlOiBuZXdUaXRsZSkpCiAgICAgICAgICAgICAgICAgICAgICAgICAgICBuZXdUaXRsZSA9ICIiCiAgICAgICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICAgICAgICAgICAgLmRpc2FibGVkKG5ld1RpdGxlLmlzRW1wdHkpCiAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgfQogICAgICAgICAgICB9CiAgICAgICAgICAgIC5uYXZpZ2F0aW9uVGl0bGUoIk15IFRhc2tzIikKICAgICAgICB9CiAgICB9Cn0K&credit=0" width="100%" height="480" style="display:block;border:0;width:100%" title="Coddy 提供的 SwiftUI 代码编辑器" loading="lazy"></iframe><figcaption style="box-sizing:border-box;padding:5px 12px;font:11px/1.4 system-ui,-apple-system,sans-serif;color:#64748b;background:#f1f5f9;border-top:1px solid #e2e8f0;text-align:right" dir="ltr">由 <a href="https://coddy.tech/embed" target="_blank" rel="noopener" style="color:#0077ff;font-weight:600;text-decoration:none;">Coddy</a> 提供支持</figcaption></figure>可在任何网站免费使用。请保留“Powered by Coddy”链接，让其他人也能找到这个编辑器。我们只有这一个要求。
看看运行效果
真实的嵌入效果，和在你页面上显示的一模一样。在任意一个中点击运行试试。
询问名字和年龄，并等待每个回答。
为什么嵌入 Coddy 编辑器
运行真实代码
读者可以修改代码并点击“运行”。Python 直接在浏览器中运行，自带实时控制台，支持 input() 和 turtle 绘图；其他语言在 Coddy 的沙箱运行环境中执行，支持输出、stdin 和命令行参数。
15 种以上语言
Python、JavaScript、TypeScript、Java、C、C++、C#、Go、Ruby、Rust、PHP、SQL 等，还支持带实时预览的 HTML 和 CSS，以及用 matplotlib 绘制的 Python 图表。一个编辑器，一种嵌入方式。
浅色和深色主题
用 theme 参数匹配你网站的风格，或者设为 auto，让编辑器跟随每位访客的系统设置。
无需配置
不需要账号，不需要 API 密钥，也不需要安装任何 JavaScript。复制一个 iframe 标签，任何能显示 HTML 的地方都能用。
使用方法
1. 设置
选择语言、主题和布局，再粘贴读者打开编辑器时看到的初始代码。
2. 复制 iframe
生成器会生成一个 <iframe> 标签，你的设置都编码在 URL 中。把它复制下来。
3. 粘贴到页面
把 iframe 放进你的 HTML、Markdown、CMS 或文档页面。编辑器会立即显示，随时可以运行。
自定义参数
嵌入编辑器完全通过 iframe URL 的查询字符串来配置。上面的生成器会帮你设置好这些参数，你也可以手动修改。
| 参数 | 取值 | 说明 |
|---|---|---|
lang | python, javascript, java, sql, html, matplotlib, cpp, ... | 编辑器运行的语言。默认为 python。 |
theme | light, dark, auto | 颜色主题。auto 会跟随访客的系统设置。默认为 auto。 |
code | base64 string | 编辑器加载时显示的初始代码，使用 URL 安全的 base64 编码。 |
layout | side, stacked | 编辑器和输出左右并排，或上下堆叠。默认为 side。 |
stdin | base64 string | 可选，点击运行时传给程序的标准输入。Python 会改为实时向读者询问输入，只有在服务器上运行时才使用这个参数。 |
常见问题
可嵌入代码编辑器免费吗？
免费。可嵌入编辑器在任何网站上都可以完全免费使用。每个嵌入的编辑器都带有一个小小的“Powered by Coddy”链接，请保留它，让更多人发现这个编辑器。这是我们唯一的要求。
读者运行代码需要 Coddy 账号吗？
不需要。任何人都可以在嵌入的编辑器中修改和运行代码，无需登录。Python 在读者的浏览器中运行；其他语言在 Coddy 的沙箱运行环境中执行。
支持哪些编程语言？
Python、JavaScript、TypeScript、Java、C、C++、C#、Go、Ruby、Rust、PHP、SQL、R 等，还支持带实时预览的 HTML 和 CSS，以及用 matplotlib 绘制的 Python 图表。每个嵌入编辑器使用一种语言。
编辑器能匹配我网站的主题吗？
可以。把 theme 参数设为 light 或 dark 来固定主题，或者设为 auto，跟随每位访客的系统设置。
嵌入的编辑器在任何网站上都能用吗？
能。它是标准的 iframe，所以可以用在纯 HTML、Markdown、大多数 CMS（WordPress、Ghost、Notion 等）以及允许 iframe 的文档工具中。