Coywolf Code Block Enhancer: الحل الأمثل لتخصيص مقاطع الكود في ووردبريس

لماذا تحتاج إلى تحسين مقاطع الكود في ووردبريس؟

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

أبرز مميزات Coywolf Code Block Enhancer

1. قائمة اختيار لغة البرمجة في المحرر

تدمج الإضافة قائمة منسدلة (Dropdown) في الشريط الجانبي للبلوك داخل محرر ووردبريس، مما يتيح لك تحديد لغة الكود بسهولة. تتضمن الإضافة 9 لغات أساسية محملة افتراضياً:

• Bash
• CSS
• HTML/Markup
• JavaScript
• JSON
• PHP
• Python
• SQL
• YAML

بالإضافة إلى ذلك، يمكنك تفعيل أكثر من 40 لغة برمجية أخرى عبر صفحة Tools → Code Blocks. وحزمة تطوير الويب والتطبيقات (Web/App dev) التي تشمل TypeScript, JSX/TSX, SCSS, Sass, Less, GraphQL تكون مفعلة بشكل افتراضي لتلبية احتياجات المطورين الحديثة.

2. تلوين الكود (Syntax Highlighting) ونظام الثيمات المتقدم

بمجرد نشر المقال، تقوم الإضافة بتلوين الكود باستخدام Prism.js مع لوحة ألوان مخصصة. لا تقتصر الإضافة على الثيمات الافتراضية، بل توفر مجموعة ضخمة تصل إلى 45 نمطاً (Themes) لتختار منها ما يتناسب مع تصميم موقعك:

• 8 ثيمات أساسية من Prism: مثل Default, Coy, Dark, Funky, Okaidia, Solarized Light, Tomorrow Night, Twilight.
• 37 ثيمات مجتمعية: تضم الأشهر عالمياً مثل Dracula, Nord, One Dark, Night Owl, Synthwave ’84, Gruvbox, Material, VS Code Dark+, و Atom Dark.

كما يتم وضع ملصق صغير (Label) في أعلى الزاوية اليسرى يوضح اسم لغة البرمجة المستخدمة، مما يسهل على القارئ التعرف على طبيعة الكود فوراً.

3. زر النسخ إلى الحافظة (Copy-to-Clipboard) والوصولية (Accessibility)

تضع الإضافة زراً أنيقياً لنسخ الكود في أعلى الزاوية اليمنى. هذا الزر ليس مجرد عنصر جمالي، بل هو مصمم وفقاً لأعلى معايير الوصولية (Accessibility):

• يحتوي على aria-label لضمان توافقه مع قارئات الشاشة.
• يعرض علامة

المصدر: Coywolf Code Block Enhancer