วิธีเลียนแบบ <pre> ด้วย <div>

ฉันกำลังเผยแพร่รหัสหลามบนเว็บไซต์ (นั่นคือ CMS) ฉันมีสคริปต์หลามที่อ่านสคริปต์หลามใด ๆ และทำให้ HTML สีไวยากรณ์ออกมาจากมัน จากนั้นฉันก็คัดลอก / วาง HTML นี้ในหน้าต่างแก้ไข CMS

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

คุณสามารถทำได้ด้วยwhite-spaceกฎCSS :

div
{
  font-family: "Courier New", monospace;
  white-space: pre;
}

แบบอักษรที่รวมอยู่ในกฎนั้นทำให้อักขระแต่ละตัวมีความกว้างเท่ากันซึ่งเป็นการจัดรูปแบบทั่วไปสำหรับข้อความใน<pre>แท็ก

โปรดทราบว่าสิ่งนี้จะทำให้<div>แท็กทั้งหมดของคุณทำงานในลักษณะนี้ โดยอุดมคติแล้วคุณจะกำหนดให้<div>คลาสแท็กเหล่านั้นมีผลกับแท็กที่คุณต้องการเลียนแบบ<pre>เท่านั้น สิ่งที่ต้องการ:

div.code
{
  font-family: "Courier New", monospace;
  white-space: pre;
}

หรือยังดีกว่าใช้<code>แท็กหากไม่ได้อยู่ใน CMS ของคุณ มันทำหน้าที่เหมือน<pre>แท็ก แต่ถูกต้องทางความหมายสำหรับการแสดงรหัส

เป็นรูปแบบที่DIVเหมือนPREคุณจำเป็นต้องมีสำหรับwhite-space: pre; DIVนอกจากนี้คุณควรใช้แบบอักษร monospace ตามที่ระบุไว้ในคำตอบแรก

การแก้ปัญหาwhite-space: nowrap;ไม่ถูกต้องเนื่องจากไม่แสดงแท็บและยังจะยุบช่องว่างหลายช่อง (@John Conde)

• nowrap: การระบุ nowrap ทำให้แน่ใจได้ว่าลำดับของช่องว่างจะยุบลงในอักขระช่องว่างเดียว แต่ตัวแบ่งบรรทัดจะถูกระงับ
• pre: การระบุล่วงหน้าทำให้แน่ใจว่าลำดับของช่องว่างจะไม่ยุบ บรรทัดจะแตกที่บรรทัดใหม่ในมาร์กอัป (หรือที่ "\ a" ที่เกิดขึ้นในเนื้อหาที่สร้างขึ้น)

จาก: http://reference.sitepoint.com/css/white-space