محرر أكواد HTML و CSS و JS أون لاين – جرب الكود بنفسك

أفضل محرر أكواد أون لاين (HTML, CSS, JS)

مرحباً بك في محرر الأكواد الذكي من “دنيا التقنية”. إذا كنت مطور ويب، طالباً، أو صانع محتوى تبحث عن بيئة سريعة وآمنة من أجل تجربة كود HTML أو كتابة سكريبتات تفاعلية، فهذه الأداة هي خيارك الأمثل. نقدم لك محرر اكواد جافا سكربت وويب متكامل (IDE) يعمل مباشرة من متصفحك، دون الحاجة لتثبيت برامج ثقيلة مثل VS Code. اكتب، نسّق، وشاهد إبداعك يتحقق في الوقت الفعلي!

`, -1); // CSS cssEditor = ace.edit("editor-css"); setupEditor(cssEditor, "css"); cssEditor.setValue(`body { font-family: 'Segoe UI', sans-serif; background-color: #f0f2f5; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; } .welcome-box { background: white; padding: 40px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); text-align: center; max-width: 600px; } h1 { color: #007acc; margin-bottom: 10px; } .btn { background: #007acc; color: white; border: none; padding: 10px 25px; border-radius: 8px; font-size: 16px; cursor: pointer; margin-top: 20px; transition: 0.3s; } .btn:hover { background: #005a9e; transform: scale(1.05); } /* تنسيق للصور المرفوعة */ .uploaded-img { max-width: 100%; height: auto; border-radius: 10px; margin-top: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }`, -1); // JS jsEditor = ace.edit("editor-js"); setupEditor(jsEditor, "javascript"); jsEditor.setValue(`function startMagic() { alert("الكود يعمل بنجاح! يمكنك إدراج صورة الآن من أيقونة الصور بالأعلى 🔥"); }`, -1); } function setupEditor(editor, mode) { editor.setTheme("ace/theme/monokai"); editor.session.setMode("ace/mode/" + mode); editor.setOptions({ fontSize: "14px", fontFamily: "Fira Code, monospace", enableBasicAutocompletion: true, enableLiveAutocompletion: true, showPrintMargin: false, wrap: true }); } function switchTab(type) { currentTab = type; document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); document.querySelectorAll('.file-item').forEach(f => f.classList.remove('active')); document.getElementById('tab-' + type).classList.add('active'); document.getElementById('nav-' + type).classList.add('active'); document.getElementById('editor-html').style.display = 'none'; document.getElementById('editor-css').style.display = 'none'; document.getElementById('editor-js').style.display = 'none'; document.getElementById('editor-' + type).style.display = 'block'; if(type === 'html') htmlEditor.resize(); if(type === 'css') cssEditor.resize(); if(type === 'js') jsEditor.resize(); } function runCode() { const html = htmlEditor.getValue(); const css = ``; const js = `\n`; const blob = new Blob([content], {type: "text/html;charset=utf-8"}); const link = document.createElement("a"); link.href = URL.createObjectURL(blob); link.download = "techdonia-project.html"; link.click(); } function resetAll() { if(confirm("هل تريد مسح كل شيء والبدء من جديد؟")) { htmlEditor.getSession().setValue(""); cssEditor.getSession().setValue(""); jsEditor.getSession().setValue(""); const frame = document.getElementById('output'); const doc = frame.contentDocument || frame.contentWindow.document; doc.open(); doc.write(""); doc.close(); switchTab('html'); } } function toggleFullscreen() { const studio = document.getElementById("code-studio"); const icon = document.getElementById("fullscreen-icon"); if (!document.fullscreenElement) { if (studio.requestFullscreen) { studio.requestFullscreen(); } else if (studio.webkitRequestFullscreen) { /* Safari */ studio.webkitRequestFullscreen(); } else if (studio.msRequestFullscreen) { /* IE11 */ studio.msRequestFullscreen(); } } else { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { /* Safari */ document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { /* IE11 */ document.msExitFullscreen(); } } } // تغيير شكل الأيقونة عند الدخول والخروج من ملء الشاشة (مثلاً عبر زر Esc) document.addEventListener("fullscreenchange", function() { const icon = document.getElementById("fullscreen-icon"); if (document.fullscreenElement) { icon.className = "fa-solid fa-compress"; // تحديث أحجام المحررات بعد التكبير setTimeout(() => { htmlEditor.resize(); cssEditor.resize(); jsEditor.resize(); }, 100); } else { icon.className = "fa-solid fa-expand"; setTimeout(() => { htmlEditor.resize(); cssEditor.resize(); jsEditor.resize(); }, 100); } }); function openFullscreen() { const html = htmlEditor.getValue(); const css = ``; const js = `

• تلوين الأكواد (Syntax Highlighting) نعتمد على محرك Ace Editor لتمييز العناصر، مما يقلل من الأخطاء الإملائية البرمجية بشكل كبير.
• تنسيق الكود (Beautifier) عبر أيقونة “العصا السحرية”، يمكنك ترتيب المسافات والأسطر البرمجية تلقائياً ليصبح كودك نظيفاً ومقروءاً.
• الوضع الليلي (Dark Theme) الراحة البصرية تهمنا. يمكنك التبديل بين الثيم الداكن (الاحترافي) والفاتح بكل سهولة.
• حفظ وتصدير المشروع احفظ إنجازك من خلال زر “تحميل”، والذي يقوم بدمج HTML و CSS و JS في ملف واحد جاهز للعمل.

مولد QR Code الاحترافي

قم بتحويل روابط مشاريعك البرمجية إلى باركود قابل للمسح.

مولد كلمات المرور

أنشئ كلمات مرور معقدة لحماية قواعد بياناتك وخوادمك.

عداد الكلمات والحروف

أداة مهمة لمراجعة محتوى صفحات الويب والمقالات.

تم تصميم وتطوير Code Playground خصرياً لزوار منصة دنيا التقنية. أداة مجانية تهدف إلى دعم المطورين العرب والمساهمة في إثراء المحتوى التقني والبرمجي.