تقريبا جميع المدونين والمبدعين محتويات أو يحتاج مطورو التكنولوجيا أحيانًا إلى عرض مقتطفات مميزة من التعليمات البرمجية على مدونتهم. وهذا يمكن أن يكون صداعًا في حد ذاته. ومع ذلك، قد يكون من الضروري أيضًا تمييز سطر واحد أو أكثر في هذا المقتطف، وهذه الوظيفة للأسف ليست جزءًا من معظم عمليات تكامل التعليمات البرمجية. لحسن الحظ، البرنامج المساعد SyntaxHighlighter Evolved موجود. سنوضح لك كيفية استخدامه للحفاظ على الكود نظيفًا وسهل القراءة قدر الإمكان.
SyntaxHighlighter Evolved
تثبيت وتفعيل البرنامج المساعد بسيط. يمكنك العثور عليها في مستودع الإضافات WP.org ولكن تأكد من أن يتم بشكل جيد من قبل أليكس ميلز (Viper007Bond)، لأن هناك بالفعل الكثير من النتائج. ومع ذلك ، نحن نعلم أنه موثوق به وحديث. علاوة على ذلك ، يأتي هذا مع كتلة متخصصة لمحرر Gutenberg. ناهيك عن عدد من المعلمات التي تسمح لك بإضفاء الطابع الشخصي على تجربتك ، مما يجعلها اختيارنا لهذا النوع من المهام.
في القائمة المعلمات من لوحة معلومات 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 أو الرمز القصير ، سيستكشف جمهورك الشفرة دون مشاكل.
