كيفية هروب < و > داخل علامات <pre> في HTML

عندما تكتب منشورات تقنية، وخاصة تلك التي تتضمن مقتطفات كود، من الضروري التأكد من عرض الصياغة بدقة. تظهر مشكلة شائعة تتعلق بعدم قدرة HTML على عرض الأقواس الزاويّة (< و >)، مما يؤدي غالبًا إلى الارتباك. وبشكل خاص، يمكن أن يؤدي استخدام علامات <pre> إلى حذف هذه الأحرف بواسطة HTML، مما يعيق المحتوى المقصود من منشورك. في هذه المدونة، سنستكشف كيفية هروب حرفي < و > بشكل فعال داخل علامات <pre>، بحيث يبقى كودك سليمًا وسهل القراءة.

المشكلة: فقدان صياغة الكود

تخيل أنك تحاول مشاركة مثال كود يستخدم المولِّدات (Generics) في C#. قد يكون لديك مقطع كود مثل هذا:

PrimeCalc calc = new PrimeCalc();
Func<int, int> del = calc.GetNextPrime;

إذا قمت بتغليفه بعلامات <pre> لتحسين التنسيق في HTML الخاص بك:

<pre>
PrimeCalc calc = new PrimeCalc();
Func<int, int> del = calc.GetNextPrime;
</pre>

ستنتهي النتائج كما يلي، حيث لا تظهر الأقواس الزاويّة على الإطلاق:

PrimeCalc calc = new PrimeCalc();
Func del = calc.GetNextPrime;

يحدث هذا لأن أحرف < و > يتم تفسيرها كعلامات HTML بدلاً من أن تُعرض كجزء من النص.

الحل: هروب الأحرف

لتضمن ظهور الأقواس الزاويّة كما تنوي، تحتاج إلى الهروب منها. في HTML، يعني ذلك تحويل < إلى < و > إلى >. إليك كيفية تنسيق الكود بشكل صحيح باستخدام الأحرف الهاربة داخل علامة <pre>.

الهروب بشكل صحيح في HTML

بدلاً من استخدام الكود القياسي، ستقوم بتعديله كما يلي:

<pre>
    PrimeCalc calc = new PrimeCalc();
    Func&lt;int, int&gt; del = calc.GetNextPrime;
</pre>

تحليل الهروب

• بالنسبة لـ <: استخدم <
• بالنسبة لـ >: استخدم >

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

النتيجة النهائية

إليك كيف يبدو الكود النهائي مغلفًا بشكل صحيح في HTML:

<pre><code> 
&lt;pre&gt;
    PrimeCalc calc = new PrimeCalc();
    Func&lt;int, int&gt; del = calc.GetNextPrime;
&lt;/pre&gt;
</code></pre>

الخاتمة

من خلال هروب < و > باستخدام < و > على التوالي، يمكنك عرض مقاطع الكود الخاصة بك داخل علامات <pre> بشكل فعال دون فقدانها بسبب تحليل HTML. هذه الحيلة السريعة ضرورية لأي كاتب تقني أو مدون يتطلع لمشاركة محتوى برمجي دقيق. في المرة القادمة التي تكتب فيها منشور مدونة يتضمن مقتطفات كود تستخدم الأقواس الزاويّة، لا تنس تطبيق تقنيات الهروب هذه للحصول على نتيجة خالية من الأخطاء.

الآن يمكنك مشاركة كودك بثقة!