埋め込み可能なエディタ
埋め込み可能なコードエディター
どんなサイトにも使える、実行可能なライブコードエディター。iframe 1つ、設定不要。
本格的に実行できるコードエディターをブログ、ドキュメント、チュートリアルに設置できます。読者はコードを書いて、その出力をあなたのページ上で直接確認できます。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">Powered by <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 など。1つのエディター、1つの埋め込みパターン。
ライト・ダークテーマ
theme パラメーターでサイトに合わせるか、auto に設定すれば、エディターは各訪問者のシステム設定に従います。
設定ゼロ
アカウントも、API キーも、インストールする JavaScript も不要。iframe タグを1つコピーすれば、HTML が使えるあらゆる場所でエディターが動作します。
仕組み
1. 設定する
言語、テーマ、レイアウトを選び、エディター読み込み時に読者が目にする開始コードを貼り付けます。
2. iframe をコピーする
ビルダーが、設定を URL にエンコードした1つの <iframe> タグを生成します。それをコピーします。
3. 貼り付ける
iframe を HTML、Markdown、CMS、ドキュメントページに配置します。エディターは即座に表示され、すぐに実行できる状態になります。
カスタマイズパラメーター
埋め込みは iframe URL のクエリ文字列だけで完全に設定されます。上のビルダーが自動で設定しますが、手動で編集することもできます。
| パラメータ | 値 | 説明 |
|---|---|---|
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 など。Coddy playground と同じ言語で、1つの埋め込みにつき1言語です。
エディターを自分のサイトのテーマに合わせられますか？
はい。theme パラメーターを light または dark に設定するとテーマを固定でき、auto にすると各訪問者のシステム設定に従います。
どんなウェブサイトでも埋め込みは動作しますか？
はい。標準的な iframe なので、素の HTML、Markdown、ほとんどの CMS（WordPress、Ghost、Notion など）、および iframe を許可するドキュメントツールで動作します。