يحتاج كل مدوّن، أو صانع محتوى، أو مطوّر تقني تقريبًا إلى عرض مقتطفات برمجية مميزة على مدونته في مرحلة ما. قد يكون هذا الأمر مُرهقًا بحد ذاته. ومع ذلك، قد يكون تمييز سطر أو أكثر داخل هذا المقتطف ضروريًا أيضًا، وهذه الميزة غير متوفرة للأسف في معظم إضافات البرمجة. لحسن الحظ، توجد إضافة SyntaxHighlighter Evolved. سنوضح لك كيفية استخدامها للحفاظ على شفرتك البرمجية نظيفة وسهلة القراءة قدر الإمكان.
SyntaxHighlighter Evolved
تثبيت وتفعيل الإضافة أمر بسيط. يمكنك العثور عليها في مستودع الإضافات WP.org ولكن تأكد من أن يتم بشكل جيد من قبل أليكس ميلز (Viper007Bond)صحيح أن هناك العديد من النتائج، لكننا نثق بأن هذه النتيجة موثوقة ومحدثة. علاوة على ذلك، فهي مزودة بوحدة مخصصة لمحرر غوتنبرغ، بالإضافة إلى عدد من الإعدادات التي تتيح لك تخصيص تجربتك، مما يجعلها خيارنا الأمثل لهذا النوع من المهام.
في القائمة المعلمات من لوحة معلومات WordPress ، ستجد عنصرًا جديدًا يسمى SyntaxHighlighter . انطلق واضغط عليها. هناك يمكنك ضبط كل شيء صغير ستحتاج إليه لتضمين المقتطفات في موقع WordPress الخاص بك.
إعدادات SyntaxHighlighter
صفحة إعدادات الإضافة سهلة الاستخدام نسبيًا. ومن أبرز ميزات هذه الإضافة خيارات التخصيص الواسعة التي توفرها لعرض الكود على موقعك. يمكنك إضافة فئات CSS إلى الكود المضمن، وتعديل مسافة ترقيم الأسطر، واختيار ألوان التنسيق، واستخدام علامات التبويب الذكية وفواصل الأسطر، وحتى ضبط تحميل تمييز لغات البرمجة المختلفة على مستوى الموقع.
نريد تحديد ثلاثة معايير معينة يجب على معظم الناس معرفتها.
إصدار البرنامج المساعد وأرقام الأسطر وأحجام علامات التبويب
الأول هو إصدار المكون الإضافي الذي تقوم بتحميله. على الرغم من أن المكون الإضافي يظل محدثًا في المستودع ، يمكنك الاختيار بين إصدارات 2.x و 3.x من المكون الإضافي ، اعتمادًا على الطريقة التي تريد بها عرض الرمز الخاص بك كلاهما آمن ، ومع ذلك ، يقدم كل منهما ميزات محددة لا يوفرها الآخر (في وقت كتابة هذا التقرير).
إذا كان أهم شيء هو نسخ المستخدمين لشفرتك البرمجية، فإن الإصدار 3.x سيكون كافيًا. أما إذا كانت شفرتك البرمجية مخصصة للعرض أكثر من كونها وظيفية، فقد تكون فواصل الأسطر في الإصدار 2.x أنسب، لأنها تُغني عن الحاجة إلى أشرطة التمرير لمقاطع الشفرة البرمجية الطويلة.
بعد ذلك، عليك تحديد ما إذا كنت تريد عرض أرقام الأسطر أم لا. تُعدّ أرقام الأسطر ضروريةً للغاية في أجزاء كبيرة من التعليمات البرمجية والدروس التعليمية. أما في المقاطع القصيرة، فلا داعي لترقيمها بشكل دائم كالسطرين 1 و2، إذ يُمكن أن يُحسّن حذفها مظهر التعليمات البرمجية بشكل ملحوظ.
ثم هناك حجم علامة التبويب لا يزال الأمر مثيرًا للجدل. القيمة الافتراضية لهذا الخيار هي 4، ولكن يمكنك تغييرها إلى أي رقم تريده، بما في ذلك القيمة الصحيحة وهي 2. (نعم، نحن ندرك أنه لا توجد قيمة صحيحة واحدة، لكننا نفضل وجود مسافتين لعلامات الجدولة).
الرمز الخاص بك والرموز المختصرة
إذا قمت بالتمرير إلى أسفل الصفحة المعلمات ستظهر لك معاينة لجزء الكود الكبير، بالإضافة إلى عدد كبير من إعدادات الرموز المختصرة. يُنصح بتصفحها للاطلاع على إمكانيات الإضافة الكاملة في تمييز أجزاء الكود. علاوة على ذلك، ستُطبّق أي تغييرات تُجريها على إعدادات عرض الكود المذكورة أعلاه هنا. لذا، تأكد من النقر على "حفظ" بعد تعديل أي من الخيارات.
رغم أن البعض لا يفضلون الرموز المختصرة لأنها قد تقيدهم ببعض الإضافات، إلا أننا نؤمن بفوائدها لأنها ذكية وسهلة التذكر. باختصار، كل ما عليك تذكره هو أمران فقط، وستعمل الإضافة بأفضل شكل ممكن.
ou ou ou et...bien, vous obtenez</li><li>[highlight 5-9]</li></ul>
أو بعض الاختلافات. إذا كنت تستطيع تذكر ، فأنت واثق من الأشياء المختلفة التي يمكنك القيام بها مع هذا البرنامج المساعد. بينما يمكنك استخدام المعرف الطويل ، فإن المكون الإضافي SyntaxHighlighter مصمم جيدًا بما يكفي لتبسيط عملك.
استخدم الرموز القصيرة
أينما كان بإمكانك عرض الرموز المختصرة، يمكنك استخدامها. في Divi أو المحرر الكلاسيكي، يمكنك استخدام وحدة النص أو محرر TinyMCE ولصق الكود بين الرموز المختصرة. نظرًا لطريقة عمل علامة التبويب المرئية، نقترح استخدامها. نص للحفاظ على هذه الشخصيات التنسيق الخاصة.
إذا كنت من مستخدمي Gutenberg / Block Editor ، فإن الأمور بهذه البساطة. يمكنك ، مرة أخرى ، استخدام كتلة النص لهذا الغرض. أسهل ، كتلة HTML المخصصة. كما هو مذكور أعلاه ، الصق الرمز في علامات الرمز القصير.
والأفضل من ذلك، أن كتلة SyntaxHighlighter Evolved مكتفية ذاتيًا. يتضمن تثبيت الإضافة كتلة Gutenberg خاصة بها؛ لذا إذا لم تكن من مستخدمي الرموز المختصرة ولا ترغب في تعديل المعلمات، فلا داعي لذلك. ما عليك سوى العثور على الكتلة ضمن تنسيق وأدخله في رسالتك أو صفحتك.
بغض النظر عن كيفية إدخال الرمز ، سترى نفس العرض على الواجهة الأمامية لموقع WordPress الخاص بك.
لتلخيص
قد تحتاج إلى عرض مقتطفات برمجية لجمهورك لأسباب عديدة. ربما تكتب دروسًا تعليمية أو تنشر حلولًا لمشاكل شائعة يمكن لجمهورك استخدامها حسب الحاجة؟ ولكن في بعض الأحيان، لا يوفر التكامل مع GitHub التجربة التي ترغب بها لمستخدميك. هنا يأتي دور إضافة مثل SyntaxHighlighter Evolved.
في بضع نقرات ، مع قليل من التخصيص وكتلة Gutenberg أو الرمز القصير ، سيستكشف جمهورك الشفرة دون مشاكل.