วิธีการ Escape < และ > ใน <pre> แท็กใน HTML

เมื่อเขียนโพสต์บล็อกทางเทคนิค โดยเฉพาะอย่างยิ่งโพสต์ที่มีตัวอย่างโค้ด การแสดงซินแท็กซ์ให้ถูกต้องนั้นเป็นสิ่งสำคัญ ปัญหาที่เกิดขึ้นบ่อยคือความไม่สามารถของ HTML ในการแสดงมุมหัก (< และ >), ซึ่งมักจะนำไปสู่ความสับสน โดยเฉพาะอย่างยิ่ง การใช้ <pre> แท็กอาจทำให้ตัวอักษรเหล่านี้ถูกตัดออกโดย HTML ซึ่งทำให้เนื้อหาที่คุณตั้งใจจะสื่อสารเสียหาย ในบล็อกนี้เราจะสำรวจวิธีการ escape อักขระ < และ > ภายใน <pre> แท็ก เพื่อให้โค้ดของคุณยังคงอยู่และอ่านได้

ปัญหา: ซินแท็กซ์โค้ดที่หายไป

ลองนึกภาพว่าคุณกำลังพยายามแบ่งปันตัวอย่างโค้ดที่ใช้เจนเนอรีกใน 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 แทนที่จะถูกแสดงเป็นส่วนหนึ่งของข้อความ

วิธีการแก้ไข: การ Escape อักขระ

เพื่อให้มั่นใจว่ามุมหักของคุณปรากฏตามที่คุณตั้งใจไว้ คุณต้อง escape มัน ใน HTML หมายถึงการแปลง < เป็น < และ > เป็น > ต่อไปนี้คือวิธีที่คุณสามารถจัดรูปแบบโค้ดได้อย่างถูกต้องโดยใช้ตัวอักษรที่ escape แล้วภายใน <pre> แท็กของคุณ

การ Escape อย่างถูกต้องใน HTML

แทนที่จะใช้โค้ดปกติ คุณจะปรับแต่งมันดังนี้:

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

การวิเคราะห์การ Escape

• สำหรับ <: ใช้ <
• สำหรับ >: ใช้ >

ด้วยวิธีนี้ ตัวอย่างโค้ดของคุณจะถูกเรนเดอร์อย่างถูกต้องในเบราว์เซอร์ ทำให้โพสต์บล็อกของคุณชัดเจนและรักษาโครงสร้างของตัวอย่างโปรแกรมของคุณไว้

ผลลัพธ์สุดท้าย

นี่คือวิธีที่โค้ดสุดท้ายดูอย่างถูกต้องเมื่อถูกห่อหุ้มใน HTML:

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

สรุป

ด้วยการ escape < และ > ด้วย < และ > ตามลำดับ คุณสามารถแสดงส่วนโค้ดของคุณใน <pre> แท็กได้อย่างมีประสิทธิภาพโดยไม่สูญเสียมันไปยังการประมวลผลของ HTML การแก้ไขอย่างรวดเร็วนี้เป็นสิ่งสำคัญสำหรับนักเขียนหรือบล็อกเกอร์ทางเทคนิคที่ต้องการแบ่งปันเนื้อหาการเขียนโปรแกรมที่ถูกต้อง ครั้งถัดไปที่คุณเขียนโพสต์บล็อกที่มีตัวอย่างโค้ดที่ใช้มุมหัก อย่าลืมใช้เทคนิคการ escape เหล่านี้เพื่อผลลัพธ์ที่ไร้ที่ติ

ตอนนี้คุณสามารถแบ่งปันโค้ดของคุณได้อย่างมั่นใจ!