برمجه محرر أكواد برمجيه

   كيفيه برمجه محرر نصوص أكواد برمجيه للويب
ربما قد تسألت كيف يعمل محرر النصوص مع معالجه الأكواد البرمجيه ؟

وكيف تعمل لإخراج النتائج للمستخدم. ويمكن أن يكون لك خبره برمجيه ولم تصل لمرحله برمجه محرر بنفسك لاكنك تحتاج معرفه ماتستخدمه.

سوف أشرح لك كيف تقوم بصنع محرر برمجي لأظهار نتائج 
لغات الويب مثل {CSS& HTML&JAVASCRIPT}مع التعديل علي الأكواد البرمجيه بنفسك

أولا قم بإنشاء ملف جديد بصيغه .HTML مثل:{yehia.html}

ثم ضع به ألاكواد التاليه:
أولا أكواد لغه CSS

textarea, iframe { border:2px solid #400040; height:600px; width:100%; background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSj7auG6sSkWTNmziJ1tm585mam3-x--_tg5HRbcfagcIdegMWu"); background-repeat: no-repeat; no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; color: #fbbe5b; font-size: 15px; } body{ background-image: url("https://thumbs.gfycat.com/DarlingTornAsiaticmouflon-max-1mb.gif"); } .w3-button {width:110px; }

يمكنك تغير كل شئ علي أختيارك مثل رابط الخلفيه المتحركه GIF في body والألوان يمكنك نسخ الكود للون والبحث عنه بمحرك بحث جوجل مثل: #400040 وجميع النصوص والجمل الأخري
{CSS} هي تعطي لأكواد الصفحه لمحه رائعه وتنسيق مثل الألوان والخطوط للكلمات .. تحكم بأبعاد الصفحه ومظهر وزياده سرعه الصفحه وتوافق مع جميع المتصفحات
ثانيا أكواد لغه HTML لايمكنني وضع الأكواد داخل إطار بسبب ترابط الأكواد سوف أضع الأكواد داخل صوره وبنهايه الموضوع سوف أضع رابط تحميل الكود كامل

يمكنك تغير نصوص محرر النصوص مثل {تشغيل} و الكود البرمجي والكثير...
{HTML}هي لغه الترميز وتستخدم في تصميم هيكل الصفحه وتعطي أوامر لوضع نصوص وصور والكثير في الصفحه ليتم التعرف عليه مع الامتداد

ثالثا أكواد لغه JavaScript

function runCode() { var content = document.getElementById('yehia').value; var iframe = document.getElementById('Spy_Share'); iframe = (iframe.contentWindow)?iframe.contentWindow:(iframe.contentDocument)? iframe.contentDocument.document: iframe.contentDocument; iframe.document.open(); iframe.document.write(content); iframe.document.close(); return false; } runCode();

هذه الأكواد خاصه بتشغيل الاكواد السابقه من الأفضل عدم تعديل عليهم .

{JavaScript} هي لغه برمجه يمكنك من خلالها فعل أشياء كثيره مثل: تحريك الصور لأنها لغه حيويه وديناميكيه وتستطيع تخزين القيم واستدعاء مكتبات من مصادر خارجيه والتحكم بلدوال.

بعد الإنتهاء من الأكواد سيكون علي هذا الشكل المحرر الخاص بك

يمكنك تغير ألوان وحجم الخط عبر التعديل علي أكواد لغه CSS

التي بين Tag : Style
تأكد عند وضعك خلفيه أو تغير رابط انه HTTPS ليستطيع تمرير البيانات من المصدر الي الملف 
في حاله عدم معرفه تغير بعض الألوان أو لاتعرف أين كود اللون الخاص بها قم بلضغط علي زر F12 شوف يخرج لك قائمه جانبيه قم بلتأشير علي زر رسمه فأره بغد الشغط عليه قم بتحديد أي شئ تريد تغيره ثم يسظهر لك الاكواد الخاصه به في القائمه لتبحث عنه في الملف لديك ثم تحفظ التغيرات التي أجريتها ويمكنك تقليل عدد الأسطر البرمجيه التي في CSS عبر وضعها في ملف بأمتداد css ثم تقوم بأستدعاء الملف عبر سطر واحد
@import url("yehia.css");

قم بتغير Yehia الي أسم الملف أو رابط الملف ثم ضعه بين TAG: Style بدلا من الأكواد CSS السابقهيمكنك تحميل الكود كامل للمحرر:

 

Yehia Online

Start

 

 

إسم الملف run1.html الملف بحجم 4 KB

إذا لم يبدأ التحميل أنقر علي {..Start..}If the download does not start, click