Встраиваемый редактор
Встраиваемый редактор кода
Живой, исполняемый редактор кода для любого сайта - один iframe, без настройки.
Добавьте настоящий, исполняемый редактор кода в свой блог, документацию или руководство. Ваши читатели пишут код и видят результат прямо на странице - на платформе Coddy. Выберите язык и тему ниже, вставьте стартовый код и скопируйте iframe.
<figure style="margin:0;display:flex;flex-direction:column;gap:6px;">
<iframe src="https://coddy.tech/embed-editor?lang=python&code=bmFtZSA9IGlucHV0KCkKYWdlID0gaW50KGlucHV0KCkpCnByaW50KGYiSGVsbG8sIHtuYW1lfSEgWW91IGFyZSB7YWdlfSB5ZWFycyBvbGQuIikK&stdin=QWxpY2UKMzAK&credit=0" width="100%" height="480" style="border:1px solid #e2e8f0;border-radius:8px;" title="Python code editor by Coddy" loading="lazy"></iframe>
<figcaption style="font:13px/1.4 system-ui,sans-serif;color:#64748b;text-align:right;" dir="ltr">Работает на <a href="https://coddy.tech/embed" target="_blank" rel="noopener" style="color:#0077ff;text-decoration:none;">Coddy</a></figcaption>
</figure>Бесплатно для любого сайта - пожалуйста, сохраните ссылку «Powered by Coddy», чтобы другие могли найти редактор. Это всё, о чём мы просим.
Зачем встраивать редактор Coddy
Запускает настоящий код
Читатели не просто смотрят на фрагмент - они редактируют его и нажимают «Запустить», чтобы выполнить на изолированных исполнителях Coddy, с выводом, stdin и аргументами командной строки.
Более 15 языков
Python, JavaScript, TypeScript, Java, C, C++, C#, Go, Ruby, Rust, PHP, SQL и другие - один редактор, единый шаблон встраивания.
Светлая и тёмная темы
Подстройте под свой сайт с помощью параметра theme или установите auto, и редактор будет следовать системным настройкам каждого посетителя.
Никакой настройки
Без аккаунтов, без API-ключей, без установки JavaScript. Скопируйте один тег iframe - и редактор работает везде, где работает HTML.
Как это работает
1. Настройте
Выберите язык, тему и макет, затем вставьте стартовый код, который ваши читатели увидят при загрузке редактора.
2. Скопируйте iframe
Конструктор создаёт один тег <iframe> с вашими настройками, закодированными в URL. Скопируйте его.
3. Вставьте
Поместите iframe в свой HTML, Markdown, CMS или страницу документации. Редактор отображается мгновенно и готов к запуску.
Параметры настройки
Встраивание полностью настраивается через строку запроса в URL iframe. Конструктор выше задаёт их за вас, но вы также можете отредактировать их вручную.
| Параметр | Значения | Описание |
|---|---|---|
lang | python, javascript, sql, java, cpp, ... | Какой язык запускает редактор. По умолчанию python. |
theme | light, dark, auto | Цветовая тема. auto следует системным настройкам посетителя. По умолчанию auto. |
code | base64 string | URL-безопасный base64 стартового кода, отображаемого при загрузке редактора. |
layout | side, stacked | Редактор и вывод рядом или расположены вертикально друг над другом. По умолчанию side. |
stdin | base64 string | Необязательный стандартный ввод, передаваемый программе при запуске. |
Часто задаваемые вопросы
Встраиваемый редактор кода бесплатный?
Да. Встраиваемый редактор полностью бесплатен для использования на любом сайте. Каждая вставка включает небольшую ссылку "Powered by Coddy" - пожалуйста, сохраните её, чтобы другие могли найти редактор. Эта ссылка - единственное, о чём мы просим взамен.
Нужен ли моим читателям аккаунт Coddy, чтобы запускать код?
Нет. Любой может редактировать и запускать код во встроенном редакторе без входа в систему. Код выполняется на изолированных исполнителях Coddy.
Какие языки программирования поддерживаются?
Python, JavaScript, TypeScript, Java, C, C++, C#, Go, Ruby, Rust, PHP, SQL и другие - те же языки, что и в playground Coddy, по одному языку на вставку.
Можно ли подстроить редактор под тему моего сайта?
Да. Установите параметр theme в light или dark, чтобы задать тему принудительно, или auto, чтобы следовать системным настройкам каждого посетителя.
Будет ли встраивание работать на любом сайте?
Да. Это стандартный iframe, поэтому он работает в обычном HTML, Markdown, большинстве CMS (WordPress, Ghost, Notion и т. д.) и инструментах документации, которые разрешают iframe.