Gömülebilir düzenleyici
Gömülebilir kod editörü
Her web sitesi için canlı, çalıştırılabilir bir kod editörü: tek iframe, kurulum yok.
Blogunuza, dokümanlarınıza veya eğitim içeriğinize gerçek, çalıştırılabilir bir kod editörü ekleyin. Okuyucularınız kod yazar ve çıktıyı doğrudan sayfanızda görür - Coddy ile. Aşağıdan bir dil ve tema seçin, başlangıç kodunuzu yapıştırın ve iframe'i kopyalayın.
Trinket'ten mi geliyorsun? Coddy'nin neyin yerine geçtiğini gör
<figure style="margin:0;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden"><iframe src="https://coddy.tech/embed-editor?lang=pygame&theme=light&code=aW1wb3J0IHB5Z2FtZQoKcHlnYW1lLmluaXQoKQpzY3JlZW4gPSBweWdhbWUuZGlzcGxheS5zZXRfbW9kZSgoNDgwLCAzNjApKQpweWdhbWUuZGlzcGxheS5zZXRfY2FwdGlvbigiTW92ZSB0aGUgc3F1YXJlIikKY2xvY2sgPSBweWdhbWUudGltZS5DbG9jaygpCmZvbnQgPSBweWdhbWUuZm9udC5Gb250KE5vbmUsIDI4KQoKeCwgeSA9IDIyMCwgMTYwCnNwZWVkID0gNApydW5uaW5nID0gVHJ1ZQp3aGlsZSBydW5uaW5nOgogICAgZm9yIGV2ZW50IGluIHB5Z2FtZS5ldmVudC5nZXQoKToKICAgICAgICBpZiBldmVudC50eXBlID09IHB5Z2FtZS5RVUlUOgogICAgICAgICAgICBydW5uaW5nID0gRmFsc2UKCiAgICBrZXlzID0gcHlnYW1lLmtleS5nZXRfcHJlc3NlZCgpCiAgICBpZiBrZXlzW3B5Z2FtZS5LX0xFRlRdOgogICAgICAgIHggLT0gc3BlZWQKICAgIGlmIGtleXNbcHlnYW1lLktfUklHSFRdOgogICAgICAgIHggKz0gc3BlZWQKICAgIGlmIGtleXNbcHlnYW1lLktfVVBdOgogICAgICAgIHkgLT0gc3BlZWQKICAgIGlmIGtleXNbcHlnYW1lLktfRE9XTl06CiAgICAgICAgeSArPSBzcGVlZAogICAgeCA9IG1heCgwLCBtaW4oeCwgNDgwIC0gNDApKQogICAgeSA9IG1heCgwLCBtaW4oeSwgMzYwIC0gNDApKQoKICAgIHNjcmVlbi5maWxsKCgyNCwgMjgsIDQwKSkKICAgIHB5Z2FtZS5kcmF3LnJlY3Qoc2NyZWVuLCAoMjU1LCAxOTYsIDApLCAoeCwgeSwgNDAsIDQwKSkKICAgIGxhYmVsID0gZm9udC5yZW5kZXIoIlVzZSB0aGUgYXJyb3cga2V5cyIsIFRydWUsICgyMzAsIDIzMCwgMjMwKSkKICAgIHNjcmVlbi5ibGl0KGxhYmVsLCAoMTAsIDEwKSkKICAgIHB5Z2FtZS5kaXNwbGF5LmZsaXAoKQogICAgY2xvY2sudGljayg2MCkKCnB5Z2FtZS5xdWl0KCkK&credit=0" width="100%" height="480" style="display:block;border:0;width:100%" title="Coddy Pygame kod düzenleyicisi" 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> tarafından sağlanıyor</figcaption></figure>Her sitede ücretsiz kullanılabilir. Başkalarının editörü bulabilmesi için "Powered by Coddy" bağlantısını koruyun. Tek isteğimiz bu.
Çalışırken gör
Sayfanda göründüğü haliyle gerçek embed’ler. Herhangi birinde Çalıştır’a bas.
Bir isim ve yaş sorar, her cevabı bekler.
Coddy'nin editörünü neden gömmelisiniz
Gerçek kod çalıştırır
Okuyucular kodu düzenleyip Çalıştır'a basar. Python doğrudan onların tarayıcısında çalışır; input() için canlı konsol ve turtle çizimleriyle. Diğer diller Coddy'nin yalıtılmış çalıştırıcılarında; çıktı, stdin ve komut satırı argümanlarıyla çalışır.
15'ten fazla dil
Python, JavaScript, TypeScript, Java, C, C++, C#, Go, Ruby, Rust, PHP, SQL ve daha fazlası; ayrıca canlı önizlemeli HTML ve CSS ile matplotlib'li Python grafikleri. Tek editör, tek gömme deseni.
Açık ve koyu temalar
theme parametresiyle sitenize uyarlayın veya auto olarak ayarlayın; editör her ziyaretçinin sistem tercihini izler.
Sıfır kurulum
Hesap yok, API anahtarı yok, kurulacak JavaScript yok. Tek bir iframe etiketi kopyalayın; editör HTML'in çalıştığı her yerde çalışır.
Nasıl çalışır
1. Yapılandırın
Dili, temayı ve düzeni seçin, ardından editör yüklendiğinde okuyucularınızın göreceği başlangıç kodunu yapıştırın.
2. iframe'i kopyalayın
Oluşturucu, ayarlarınız URL'de kodlanmış tek bir <iframe> etiketi üretir. Kopyalayın.
3. Yapıştırın
iframe'i HTML, Markdown, CMS veya doküman sayfanıza yerleştirin. Editör anında yüklenir ve çalıştırmaya hazır olur.
Özelleştirme parametreleri
Gömme tamamen iframe URL'sinin sorgu dizesiyle yapılandırılır. Yukarıdaki oluşturucu bunları sizin için ayarlar, ancak elle de düzenleyebilirsiniz.
| Parametre | Değerler | Açıklama |
|---|---|---|
lang | python, javascript, java, sql, html, matplotlib, cpp, ... | Editörün hangi dili çalıştıracağı. Varsayılan python. |
theme | light, dark, auto | Renk teması. auto, ziyaretçinin sistem ayarını izler. Varsayılan auto. |
code | base64 string | Editör yüklendiğinde gösterilen başlangıç kodunun URL güvenli base64 hali. |
layout | side, stacked | Editör ve çıktı yan yana veya dikey olarak üst üste. Varsayılan side. |
stdin | base64 string | Çalıştırınca programa verilen isteğe bağlı standart girdi. Python bunun yerine okuyucuya canlı sorar ve bunu yalnızca sunucuda çalışırken kullanır. |
Sıkça sorulan sorular
Gömülebilir kod editörü ücretsiz mi?
Evet. Gömülebilir editör herhangi bir web sitesinde kullanmak için tamamen ücretsizdir. Her gömme küçük bir "Powered by Coddy" bağlantısı içerir - başkalarının editörü keşfedebilmesi için lütfen koruyun. Karşılığında istediğimiz tek şey bu bağlantıdır.
Okuyucularımın kod çalıştırmak için Coddy hesabına ihtiyacı var mı?
Hayır. Herkes giriş yapmadan gömülü editörde kodu düzenleyip çalıştırabilir. Python okuyucunun tarayıcısında, diğer diller Coddy'nin yalıtılmış çalıştırıcılarında çalışır.
Hangi programlama dilleri destekleniyor?
Python, JavaScript, TypeScript, Java, C, C++, C#, Go, Ruby, Rust, PHP, SQL, R ve daha fazlası; ayrıca canlı önizlemeli HTML ve CSS ile matplotlib'li Python grafikleri. Her gömme için bir dil.
Editörü sitemin temasına uyarlayabilir miyim?
Evet. Bir temayı zorlamak için theme parametresini light veya dark olarak, her ziyaretçinin sistem tercihini izlemek için auto olarak ayarlayın.
Gömme herhangi bir web sitesinde çalışır mı?
Evet. Standart bir iframe olduğundan düz HTML, Markdown, çoğu CMS (WordPress, Ghost, Notion vb.) ve iframe'lere izin veren doküman araçlarında çalışır.