كيفية إضافة أداة تمييز بناء جملة الكود (Highlighter) المحددة لمدونة بلوجر

إضافة تلوين النصوص البرمجية (Syntax Highlighting) إلى مقاطع الكود الخاصة بك يمكن أن يعزز من سهولة القراءة ويجعل منشورات مدونتك أكثر جاذبية، خاصة عندما يتعلق الأمر بالمواضيع التقنية. في هذا الدليل، سنرشدك عبر الخطوات اللازمة لتطبيق أداة تلوين النصوص البرمجية في مدونتك على منصة بلوجر.

لماذا نستخدم أدوات تلوين النصوص البرمجية؟

• تحسين قابلية القراءة: تصبح مقاطع الكود أسهل في القراءة والفهم عندما يتم تلوينها بشكل صحيح.
• زيادة التفاعل: الكود المنسق جيدًا يمكن أن يبقي القراء على صفحتك لفترة أطول، مما يزيد من التفاعل.
• مظهر احترافي: تلوين النصوص البرمجية يعطي لمدونتك مظهرًا أنيقًا واحترافيًا.

خطوات إضافة أداة تلوين النصوص البرمجية في بلوجر

اتبع هذه الخطوات لتطبيق أداة تلوين النصوص البرمجية على موقع بلوجر الخاص بك:

اختيار أداة التلوين 1

هناك العديد من الأدوات المتاحة لتلوين النصوص البرمجية، مثل:

1. Prism.js: خفيفة الوزن وسهلة التخصيص.
2. Highlight.js: تدعم العديد من لغات البرمجة.
3. SyntaxHighlighter: أداة شائعة وسهلة الاستخدام.

إضافة الأداة إلى مدونتك2

اذهب الي لوحة تحكم بلوجر

حدد السمة تحرير HTML

ابحث عن وسم </head> وأضف رابط CDN للأداة التي اخترتها قبل هذا الوسم. على سبيل المثال، إذا كنت تستخدم Prism.js.

<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>

إضافة الكود الملوَّن في المنشورات 3

عند كتابة منشور جديد، استخدم وسم <pre> و <code> لإضافة الكود. على سبيل المثال:

<pre><code class="language-javascript">
function helloWorld() {
  console.log("Hello, World!");
}
</code></pre>

تخصيص التنسيقات (اختياري) 4

يمكنك تخصيص ألوان وأنماط التلوين باستخدام CSS. أضف التنسيقات المطلوبة في قسم <style> في قالب مدونتك.

نصائح إضافية

• اختر سمة مناسبة: تأكد من أن ألوان التلوين تتناسب مع تصميم مدونتك.
• اختبر الأداء: تأكد من أن الأداة لا تؤثر على سرعة تحميل مدونتك.
• استخدم الأدوات المناسبة: اختر أداة تدعم لغات البرمجة التي تستخدمها بشكل متكرر.

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

تمنياتي لكم بالتوفيق في تحسين مدونتكم!