Встраиваемый редактор
Встраиваемый редактор кода
Живой, исполняемый редактор кода для любого сайта - один 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=flutter&theme=light&code=aW1wb3J0ICdwYWNrYWdlOmZsdXR0ZXIvbWF0ZXJpYWwuZGFydCc7Cgp2b2lkIG1haW4oKSA9PiBydW5BcHAoY29uc3QgQ291bnRlckFwcCgpKTsKCmNsYXNzIENvdW50ZXJBcHAgZXh0ZW5kcyBTdGF0ZWxlc3NXaWRnZXQgewogIGNvbnN0IENvdW50ZXJBcHAoe3N1cGVyLmtleX0pOwoKICBAb3ZlcnJpZGUKICBXaWRnZXQgYnVpbGQoQnVpbGRDb250ZXh0IGNvbnRleHQpIHsKICAgIHJldHVybiBNYXRlcmlhbEFwcCgKICAgICAgZGVidWdTaG93Q2hlY2tlZE1vZGVCYW5uZXI6IGZhbHNlLAogICAgICB0aGVtZTogVGhlbWVEYXRhKGNvbG9yU2NoZW1lU2VlZDogQ29sb3JzLmluZGlnbyksCiAgICAgIGhvbWU6IGNvbnN0IENvdW50ZXJQYWdlKCksCiAgICApOwogIH0KfQoKY2xhc3MgQ291bnRlclBhZ2UgZXh0ZW5kcyBTdGF0ZWZ1bFdpZGdldCB7CiAgY29uc3QgQ291bnRlclBhZ2Uoe3N1cGVyLmtleX0pOwoKICBAb3ZlcnJpZGUKICBTdGF0ZTxDb3VudGVyUGFnZT4gY3JlYXRlU3RhdGUoKSA9PiBfQ291bnRlclBhZ2VTdGF0ZSgpOwp9CgpjbGFzcyBfQ291bnRlclBhZ2VTdGF0ZSBleHRlbmRzIFN0YXRlPENvdW50ZXJQYWdlPiB7CiAgaW50IF9jb3VudCA9IDA7CgogIHZvaWQgX2luY3JlbWVudCgpIHsKICAgIHNldFN0YXRlKCgpID0-IF9jb3VudCsrKTsKICAgIHByaW50KCdDb3VudCBpcyBub3cgJF9jb3VudCcpOwogIH0KCiAgQG92ZXJyaWRlCiAgV2lkZ2V0IGJ1aWxkKEJ1aWxkQ29udGV4dCBjb250ZXh0KSB7CiAgICByZXR1cm4gU2NhZmZvbGQoCiAgICAgIGFwcEJhcjogQXBwQmFyKHRpdGxlOiBjb25zdCBUZXh0KCdIZWxsbywgRmx1dHRlciEnKSksCiAgICAgIGJvZHk6IENlbnRlcigKICAgICAgICBjaGlsZDogQ29sdW1uKAogICAgICAgICAgbWFpbkF4aXNTaXplOiBNYWluQXhpc1NpemUubWluLAogICAgICAgICAgY2hpbGRyZW46IFsKICAgICAgICAgICAgY29uc3QgVGV4dCgnWW91IHByZXNzZWQgdGhlIGJ1dHRvbicpLAogICAgICAgICAgICBUZXh0KAogICAgICAgICAgICAgICckX2NvdW50JywKICAgICAgICAgICAgICBzdHlsZTogVGhlbWUub2YoY29udGV4dCkudGV4dFRoZW1lLmRpc3BsYXlMYXJnZSwKICAgICAgICAgICAgKSwKICAgICAgICAgICAgVGV4dChfY291bnQgPT0gMSA_ICd0aW1lJyA6ICd0aW1lcycpLAogICAgICAgICAgXSwKICAgICAgICApLAogICAgICApLAogICAgICBmbG9hdGluZ0FjdGlvbkJ1dHRvbjogRmxvYXRpbmdBY3Rpb25CdXR0b24oCiAgICAgICAgb25QcmVzc2VkOiBfaW5jcmVtZW50LAogICAgICAgIHRvb2x0aXA6ICdBZGQgb25lJywKICAgICAgICBjaGlsZDogY29uc3QgSWNvbihJY29ucy5hZGQpLAogICAgICApLAogICAgKTsKICB9Cn0K&credit=0" width="100%" height="480" style="display:block;border:0;width:100%" title="Редактор кода Flutter от Coddy" 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 с живым предпросмотром и графики Python с matplotlib. Один редактор, единый шаблон встраивания.
Светлая и тёмная темы
Подстройте под свой сайт с помощью параметра theme или установите auto, и редактор будет следовать системным настройкам каждого посетителя.
Никакой настройки
Без аккаунтов, без API-ключей, без установки JavaScript. Скопируйте один тег iframe - и редактор работает везде, где работает HTML.
Как это работает
1. Настройте
Выберите язык, тему и макет, затем вставьте стартовый код, который ваши читатели увидят при загрузке редактора.
2. Скопируйте iframe
Конструктор создаёт один тег <iframe> с вашими настройками, закодированными в URL. Скопируйте его.
3. Вставьте
Поместите iframe в свой HTML, Markdown, CMS или страницу документации. Редактор отображается мгновенно и готов к запуску.
Параметры настройки
Встраивание полностью настраивается через строку запроса в URL iframe. Конструктор выше задаёт их за вас, но вы также можете отредактировать их вручную.
| Параметр | Значения | Описание |
|---|---|---|
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 с живым предпросмотром и графики Python с matplotlib. Один язык на одну вставку.
Можно ли подстроить редактор под тему моего сайта?
Да. Установите параметр theme в light или dark, чтобы задать тему принудительно, или auto, чтобы следовать системным настройкам каждого посетителя.
Будет ли встраивание работать на любом сайте?
Да. Это стандартный iframe, поэтому он работает в обычном HTML, Markdown, большинстве CMS (WordPress, Ghost, Notion и т. д.) и инструментах документации, которые разрешают iframe.