تقديم مجموعة من الشروحات والمواضيع التي تهم بالحاسوب والانترنت من حيث الاستخدام والانشاء والتصميم والحماية، مع الاهتمام بمدونات بلوجر ومواقع التواصل الاجتماعي خصوصا فيسبوك وتويتر

النشرة البريدية @

طريقة وضع كود مصدري في بلوجر - تنسيق الكود

دروس، شرح، طريقة، بلوجر

تحتوي هذه المقالة على ما يلي

طريقة سهلة و يسيرة لوضع أكواد مصدرية في التدوينات دون أن تختفي أو يحذف جزء منها نتيجة ترجمة المتصفح لها. يمكن الوصول إليها انطلاقا من محرر التدوينات في لوحة التحكم:

أولا : إدخال الكود عبر محرر المدونة

طبعا نعلم أن المحرر له شقين اثنين يمكن من خلالهما تنسيق التدوينة و أقصد تحرير HTML و تأليف ، ذكرت هذا للتمييز و كذلك لأقول أننا سندخل الكود عبر وضع التأليف ، و سنحتاج إلى تفعيل خاصية إضافية من إعدادات التأليف هي إظهار HTML فعليًا كما هو موضح في الصورة .





تمثيلا لما سبق سأدرج هذا الكود


type="text/javascript">
document.write("Hello World!")
</script>

بعد إدخال الكود ستلاحظ أنه موجه جهة اليمين و الأصح أن يوجه إلى اليسار، حدده إذا ثم اضغط أيقونة التوجيه من أدوات المحرر و سيصبح كما يلي:



<script type="text/javascript">
document.write("Hello World!")
</script>

لكن رغم ذلك فالكود لازال يحتاج إلى إضافة لتوجيهه بشكل صحيح. انتقل الآن إلى وضع تحرير HTML ثم ابحث عن الكود الذي أدخلت، ستجد في بدايته هذا الوسم 

<div style="text-align: left;">
تجعله هكذا بإضافة ما لون بالأحمر

<div dir="ltr" style="text-align: left;">



بعد ذلك سيصبح الكود الذي أدخلت هكذا
تلاحظ الآن كيف أصبح تنسيقه حسنا :)


<script type="text/javascript">
document.write("Hello World!")
</script>

ثالثا: خلفية الكود

لتمييز الكود عن بقية النصوص سنضعه في إطار و سنستخدم لذلك أداة الاقتباس الموجودة في المحرر. فبعد تحديد الكود مرة أخرى نضغط أداة الاقتباس هذه  . و بهذه الحركة اليسيرة تكون قد أنهيت التنسيق و سيصبح هكذا:

<script type="text/javascript">
document.write("Hello World!")
</script>

و أشير إلى أن شكل الإطار و لون الخلفية سيبدو حسب قالب مدونتك و كما هو محدد في أكواد css فيه و ليس بالضرورة كما يبدو هنا.