كيفية إنشاء صفحة تعليمية بتصميم مشابه ومربعات لعرض الأكواد الملوّنة وخيار نسخ الأكواد؟

يمكنك الاستعانة بواحدة من أشهر مكتبات الويب في تنسيق الاكواد وضبطها في حاويات .. هذه المكتبة هي مكتبة highlight.js، اذ تدعم 197 لغة وتتوفر بـ 248 تنسيقا وسمة مختلفة. تعطي تنسيقات مشابهة لما في الموقع المرفق بل وأفضل. 

رابط المكتبة الرسمي: https://highlightjs.org

سهلة التثبيت والاستعمال: 

قم بتضمين ملفات المكتبة 

<link rel="stylesheet" href="/path/to/styles/default.min.css">
<script src="/path/to/highlight.min.js"></script>

ثم قم بتهيئة حاويات الاكواد: 

<script>hljs.highlightAll();</script>

يقصد بحاويات الأكواد أي حاويات على هذا الشكل:

<pre><code class="language-js">console.log('قم بتنسيق هاته الشيفرة')</code></pre>

ملحوظة: قم بإضافة اسم اللغة الى اللاحقة language في اسم الكلاس ليتم تمييز الشيفرات وفق تلك اللغة. أمثلة:

• language-php
• language-html
• language-plaintext

قد لا تتوفر هاته المكتبة على زر للنسخ، ولكن يمكنك برمجة الأمر بشكل بسيط. 

الموقع يستخدم Bootstrap وJQuery UI وJQuery و مكتبة OWL Carousel الخاصة بالسلايدات، وتستطيع تقليد تصميم الصفحة كما تريد عن طريق Bootstrap أو Tailwind، ولكن يجب تغيير الألوان والتصميم بعض الشيء لخلق هوية لموقعك إن أمكن. 

وبخصوص تنسيق الكود وعرض بشكل ملون، فذلك يسمى  syntax highlighting ويتم عن طرق مكتبة مثل Prism وهي ما يتم استخدامها في الموقع، وستجد الشرح الخاص بها في الموقع الرسمي.

وقد شرحت تلك المكتبة من قبل في النقاش التالي:

• إنشاء نموذج مصغر من موقع CodePen

وهناك مكتبات أخرى مثل CodeMirror أو Ace Editor.

وبالنسبة للخط فهو almarai وستجده متاح على خطوط جول.

هل يوجد موقع online أو برنامج اضع فيه المادة التعليمة وانسق المادة التعليمية من خلاله بدل التشعبات الكثيرة هذه

بتاريخ 19 ساعة قال Othman Khalid:

هل يوجد موقع online أو برنامج اضع فيه المادة التعليمة وانسق المادة التعليمية من خلاله بدل التشعبات الكثيرة هذه

نعم، هناك العديد من منصات إدارة المحتوى التعليمي (CMS) التي توفر المتطلبات التي ذكرتها. ومن بين هذه المنصات:

• Moodle: هو نظام إدارة التعلم المفتوح المصدر الذي يتيح إنشاء صفحات تعليمية ومواد تعليمية متنوعة، بما في ذلك الصور والفيديو والصوت والأكواد الملونة والمزيد. كما يتضمن Moodle أدوات لإدارة الدورات والمناقشات والتعليقات والمهام والتقييمات.
• Blackboard: هو نظام إدارة التعلم المستخدم على نطاق واسع في المؤسسات التعليمية، ويتيح إنشاء صفحات تعليمية ومواد تعليمية متنوعة، بما في ذلك الصور والفيديو والصوت والأكواد الملونة والمزيد. كما يتضمن Blackboard أدوات لإدارة الدورات والمناقشات والتعليقات والمهام والتقييمات والاختبارات.
• Schoology: هي منصة إدارة التعلم السحابية التي تتيح إنشاء صفحات تعليمية ومواد تعليمية متنوعة، بالإضافة إلى إدارة الدورات والمناقشات والتعليقات والمهام والتقييمات والاختبارات. وتتميز Schoology بتصميمها البسيط والمستخدم الودي، بالإضافة إلى توفير أدوات للتعاون بين الطلاب والمعلمين وأولياء الأمور.
• Edmodo: هي منصة إدارة التعلم السحابية التي تتيح إنشاء صفحات تعليمية ومواد تعليمية متنوعة، بالإضافة إلى إدارة الدورات والمناقشات والتعليقات والمهام والتقييمات.وتتميز Edmodo بتوفير مجموعات دراسية وتبادل المواد التعليمية والتفاعل بين الطلاب والمعلمين، وتوفير ميزات للتعاون والتواصل بين الأعضاء.

يجب الإشارة إلى أن هذه المنصات تختلف في التصميم والوظائف والتكنولوجيا المستخدمة، وينبغي اختيار المنصة التي تناسب الاحتياجات التعليمية الخاصة بك والتي تتوافق مع المتطلبات التقنية. كما يجب النظر في التكاليف والتوافق مع أنظمة التعلم الإلكتروني المستخدمة في المؤسسة التعليمية.