اريد بناء موقع محرر اكواد html css js
مثل موقع pencode
ما انسب طريقه
موقع محرر اكواد
الأمر ليس بتلك الصعوبة، حيث أنك تستطيع إنشاء نموذج مصغر من موقع CodePen حيث يتم كتابة الأكواد ويتم حقنها في عنصر iframe ثم يتم ترجمتها من قبل المتصفح وعرض النتيجة:
وإليك مثال:
قم بإنشاء مجلد باسم code-pen وبداخله قم بإنشاء ملف HTML وضع الكود التالي به:
<!DOCTYPE html> <html> <head> <title>Live Coding Playground</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="./index.css" /> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@500&display=swap" rel="stylesheet" /> <!-- Need prism CSS for highlight code --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css" /> <link rel="stylesheet" href="./prism-live.css" /> <script defer type="text/javascript" src="./index.js"></script> <!-- Need prism js for highlight code --> <script src=" https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js "></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> <script src="prism-live.js?load=css,html,javascript"></script> </head> <body> <div id="coding_playground_outer"> <header id="playground_header"> <h1>live Coding Playground</h1> </header> <div class="page-wrap twilight"> <div class="boxes"> <div id="coding_area"> <textarea id="html" placeholder="HTML" class="prism-live language-html"></textarea> <textarea id="css" placeholder="CSS" class="prism-live language-css"></textarea> <textarea id="js" placeholder="javascript" class="prism-live language-js"></textarea> </div> <div id="code_output"> <iframe id="code"></iframe> </div> </div> </div> </div> </body> </html>
ولاحظ أنه تم استخدام مكتبة prism.js و prism-live.js حيث أن prism-live.js تعتمد على prism.js وتسمح بتلوين الأكواد داخل عنصر <textarea>
ومكتبة PrismJS هي مكتبة JavaScript تستخدم لتحسين عرض وتنسيق رموز البرمجة والشفرات المصدرية على صفحات الويب. تستخدم هذه المكتبة تقنية تلوين بناءً على الصيغة، حيث تستطيع التعرف على لغة البرمجة وتلوين الأكواد حسب الأنواع المختلفة للأكواد والمتغيرات والكلمات المفتاحية.
حيث تتضمن PrismJS دعمًا للعديد من لغات البرمجة مثل HTML و CSS و JavaScript و PHP و C و C++ و Java و Python و Ruby وغيرها، كما يمكن تخصيص التصميم الخاص بالتلوين وفقًا لاحتياجاتك.
وقد تم استيراد مكتبة prism.js عن طريق CDN كما ترى، ولكن بالنسبة لمكتبة prism-live.js أنت بحاجة إلى تحميل أكواد CSS و JS الخاصة بها ووضعها في الملفات التالية:
- prism-live.css
- prism-live.js
وذلك من خلال الموقع الرسمي هنا:
- live.prismjs.com
أي قم بالدخول للموقع وستجد أكواد CSS وأكواد JS الخاصة بالمكتبة قم بنسخها بالكامل، ثم ضعها في الملفات التي ذكرتها لك وهما:
- prism-live.css
- prism-live.js
بعد ذلك عليك بإنشاء ملف تنسيقات باسم istyle.css وضع به الكود التالي :
* {
padding: 0;
margin: 0;
outline: 0;
}
header#playground_header {
background: #1e1f26;
height: 65px;
}
header#playground_header > h1 {
padding: 0;
text-align: center;
color: #fff;
font-weight: 700;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
line-height: 35px;
font-family: 'IBM Plex Sans', sens-serif;
}
iframe#code {
bottom: 0;
position: relative;
width: 100%;
height: 40vh;
border: unset;
background: #f2f4f6;
}
.prism-live {
min-height: 350px;
overflow-x: hidden;
width: 100%;
}
div#coding_area > div {
width: 100%;
border-left: 15px solid #555865;
}
div#coding_area > div:first-child {
border-left: none;
}
div#coding_area {
width: 100%;
height: calc(60vh - 60px);
min-height: 125px;
display: flex;
overflow: hidden;
border-bottom: 15px solid #555865;
}
div#code_output {
height: 100%;
}
وأخيرًا قم بإنشاء ملف باسم app.js وضع به الكود التالي:
function compile() {
const html = document.getElementById('html');
const css = document.getElementById('css');
const js = document.getElementById('js');
const code = document.getElementById('code').contentWindow.document;
document.body.onkeyup = function () {
code.open();
code.writeln(
html.value + '<style>' + css.value + '</style>' + '<script>' + js.value + '</script>'
);
code.close();
};
}
compile();
وفي النهاية من المفترض أن تصبح ملفات المشروع لديك بالشكل التالي:
وتستطيع البحث على جوجل بعبارة how to build a site like codepen وستجد شروحات كثيرة.
بالمفهوم البسيط؟ قم بتجميع اكواد css وجافاسكربت وhtml وقم بحقنها الى عنصر HTML في الوثيقة. او الى عنصر iframe تقوم بتوليده عن طريق الجافاسكربت.
قد تحتاج التطوير من الفكرة أكثر فتقوم بالتعامل مع بعض المفاهيم المتقدمة، مثل الاستماع الى اخطاء الجافاسكربت وما الى ذلك لعرضها ضمن نافذة تظهر كنافذة طرفية console. مثلما قد يمكن ايضا استعمال محرر اكواد ومميز شيفرات مثل prismJs او codeMirror لتمييز الاكواد وتنسيقها وتوفير تجربة تحرير جيدة نوعا ما.
على الرغم من أن الفكرة تبدو معقذة، أقترح عليكَ أن تستشير أحد المبرمجين المحترفين من المستقلّين العاملين في مجال العمل الحر، حيث أن منصّات مثل مستقل وخمسات تمتلك العديد من المستقلّين المحترفين في مختلف المجالات، مما سيتيح لكَ التعرّف على العديد منهم واستشاراتهم. يمكنك أن تتفحّص أيضًا مختلف سابقات الأعمال لهؤلاء المستقلّين، أو تختار التعامل مع مستقل مبتدئ على المنصّة يرغب في أن يثبت نفسه وبالتالي سيمنحك كل تركيزه، كما تستطيع أيضًا أن تبحث عن مستقلّين لهم أعمال سابقة مماثلة تمامًا لما تريد تنفيذه. إليك المنصّتين:
إذا كنت تريد بناء موقع محرر أكواد HTML و CSS و JS مثل موقع CodePen، فهناك عدة طرق يمكنك اتباعها. أحد الطرق هي استخدام مكتبة JavaScript تسمى CodeMirror أو Ace Editor، والتي توفر واجهة برمجة تطبيقات (API) لإنشاء وتحرير أكواد في المتصفح.
يمكنك تضمين CodeMirror في صفحة HTML باستخدام عنصر script، ومن ثم إنشاء عنصر textarea لكل لغة برمجة تريد دعمها. يمكنك تهيئة خصائص CodeMirror باستخدام كائن JavaScript، مثل mode لتحديد لغة البرمجة، وtheme لتحديد شكل المحرر، وlineNumbers لإظهار أرقام الأسطر، وغيرها.
يمكنك أيضا استخدام مكتبة JavaScript أخرى تسمى Live.js، والتي تسمح بتحديث المحتوى على الصفحة تلقائيا عند حفظ الملفات. يمكنك تضمين Live.js في صفحة HTML باستخدام عنصر script، ومن ثم إضافة خاصية data-live للعناصر التي تريد تحديثها حيويا، مثل iframe لعرض النتيجة. هذه هي إحدى الطرق الممكنة لبناء موقع محرر أكواد HTML و CSS و JS مثل موقع CodePen، ولكن ليست الوحيدة. يمكنك البحث عن مصادر أخرى أو استخدام أدوات أخرى لتطوير مشروعك.
و لإنشاء محرر أكواد باستخدام CodeMirror ، ستحتاج إلى تضمين ملفات CSS و JavaScript الخاصة به في صفحتك الويب ، ومن ثم استخدام الدالة fromTextArea لتحويل عنصر textarea إلى محرر أكواد. يمكنك تمرير خيارات إضافية لتهيئة المحرر حسب احتياجاتك ، مثل تفعيل أرقام الأسطر أو تغيير اللغة أو تطبيق السمة.
يمكنك أيضًا استخدام وظائف وإضافات CodeMirror لإضافة مزايا أخرى ، مثل التكميل التلقائي أو البحث والاستبدال.
هذا مثال على كود HTML يستخدم CodeMirror لإنشاء محرر أكواد للغة JavaScript:
<!-- إنشاء عنصر textarea -->
<textarea id="myTextarea"></textarea>
<!-- تضمين ملفات CSS و JavaScript الخاصة بCodeMirror -->
<link rel="stylesheet" href="lib/codemirror.css">
<script src="lib/codemirror.js"></script>
<script src="mode/javascript/javascript.js"></script>
<script src="addon/hint/show-hint.js"></script>
<script src="addon/hint/javascript-hint.js"></script>
<!-- استخدام دالة fromTextArea لتحويل textarea إلى محرر أكواد -->
<script>
var editor = CodeMirror.fromTextArea(myTextarea, {
// تفعيل أرقام الأسطر
lineNumbers: true,
// تغيير اللغة إلى JavaScript
mode: "javascript",
// تطبيق سمة monokai
theme: "monokai",
// تفعيل التكميل التلقائي
extraKeys: {"Ctrl-Space": "autocomplete"}
});
</script>
التعليقات