CSS Style for Code على مدونتك

المغلق

سألني أحد أصدقائي كيف صنعت مناطق الكود في آخر مدخلة في مدونتي. أنا في الواقع "زيف" منطقة الشفرة باستخدام نمط. في Blogger ، يمكنك تعديل القالب الخاص بك. أضفت النمط التالي:

p.code {font-family: Courier New؛ حجم الخط: 8 نقطة ؛ نمط الحدود: أقحم ؛ عرض الحدود: 3 بكسل ؛ الحشو: 5 بكسل ؛ لون الخلفية: #FFFFFF ؛ ارتفاع الخط: 100٪ ؛ الهامش: 10 بكسل}

الخطوة التالية هي تحرير علامتي في وضع "تحرير Html". أنا ببساطة أشير إلى أسلوبي الجديد من خلال صنع العلامة. هاهو! تفصيل الأنماط:

  • اضبط الخط على Courier New… يبدو كمحرر كود عام
  • اضبط حجم الخط على 8pt ليبدو صحيحًا
  • اضبط نمط حدود الفقرة على "أقحم". هذا يكرر شكل منطقة النص على الصفحة.
  • اضبط عرض الحد على 2 أو 3 بكسل. هذا يجعل نمط الحدود الداخلي يبدو صحيحًا.
  • يحدد الحشو المسافة بين الحد والنص الموجود بداخله.
  • لون الخلفية ... اضبطه على الأبيض (#FFFFFF)
  • ارتفاع السطر - قمت بتعديل هذا إلى 100٪ لأن بعض الأنماط الأخرى في سمة المدون الخاصة بي جعلت ارتفاع خطي حوالي 200٪
  • اضبط الهامش على 10 بكسل. يؤدي هذا إلى نقل الفقرة (علامة p) 10 بكسل بعيدًا عن كل شيء.

هذا كل ما هناك أيضًا! ملاحظة واحدة: المحرر الذي يأتي مع Blogger غير قادر على عرض كما سيظهر في مدونتك. لكنها تعمل وتبدو رائعة!

ملاحظة أخرى… بعد إجراء التعديل على العلامة ، يحب محرر Blogger استخدامها عشوائيًا في مكان آخر عبر منشورك. إنه مزعج بعض الشيء! نصيحتي هي كتابة المنشور بالكامل ثم إجراء التعديل الصغير بعد ذلك.

ملاحظة أخيرة ... تأكد من استخدام كيانات HTML لعرض الرموز الخاصة بك! بعض الأمثلة:

  • الاقتباسات (") هي"
  • > هو>
  • > هو>

ترميز سعيد!

3 تعليقات

  1. 1

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

  2. 2
  3. 3

    أنا الشيء ليس هناك حاجة للكتابة الآن من. يمكنك استخدام برامج تحرير مفيدة. يمكنك اختيار اللون ، والحدود ، إلخ ..

ما رأيك؟

يستخدم هذا الموقع نظام Akismet لتقليل الرسائل الضارة. تعرف كيف تتم معالجة بيانات تعليقك.