Cara meniru <pre> dengan <div>

18

Saya menerbitkan kode python di situs web (yaitu CMS). Saya memiliki skrip python yang membaca skrip python dan membuat HTML berwarna sintaks. Lalu saya salin / tempel HTML ini ke jendela pengeditan CMS.

Masalahnya adalah skrip penyorotan sintaksis python saya menggunakan <pre>tag untuk menjaga tab / spasi yang cukup penting dalam python. Namun, CMS, untuk beberapa alasan yang tidak jelas, menghapus <pre>tag. Admin memberi tahu saya bahwa saya harus menggunakan <div>alih-alih <pre>. Bisakah Anda membantu saya <div>mendesain a untuk menjaga format wihte-space?

html css tnorgd
sumber
Jawaban John baik-baik saja untuk pertanyaan spesifik yang diajukan, meskipun ini sedikit menurunkan semantik konten Anda. Mengenai CMS yang melepaskan tag pra, beberapa aplikasi memiliki pengaturan yang menentukan HTML apa yang diperbolehkan dalam konten. Jika Anda memposting banyak teks yang telah diformat sebelumnya, ada baiknya meminta admin Anda untuk melihat penyesuaian jika ada untuk aplikasi Anda, daripada memberitahu Anda untuk menggunakan (terus terang) solusi sewenang-wenang.
Su '

Jawaban:

24

Anda dapat melakukannya dengan white-spaceaturan CSS :

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

Font yang disertakan dalam aturan itu membuat setiap karakter memiliki lebar yang sama yang merupakan format umum untuk teks dalam sebuah <pre>tag.

Perlu diingat bahwa ini akan membuat semua <div>tag Anda berperilaku seperti ini. Idealnya Anda akan menetapkan <div>tag - tag tersebut suatu kelas untuk memengaruhi hanya tag yang ingin Anda tiru <pre>. Sesuatu seperti:

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

Atau, lebih baik lagi, gunakan <code>tag jika tidak dihapus oleh CMS Anda. Kerjanya seperti <pre>tag tetapi secara semantik benar untuk menampilkan kode.

John Conde
sumber
2
+1 untuk disebutkan <code>dan semantik. Perhatikan bahwa <code>membungkus spasi putih secara default, jadi Anda harus menetapkannya white-space:nowrapjuga. Juga <pre>merupakan elemen blok di mana <code>inline; jadi untuk meniru <pre>, display:blockharus diberikan.
Jari Keinänen
Hapus "Courier New", font default cocok dengan pra browser Anda lebih dekat.
access_granted
4

Untuk memformat DIVseperti PRE, Anda memerlukan white-space: pre;untuk DIV. Selain itu Anda harus menggunakan font monospace, seperti yang dinyatakan dalam jawaban pertama.

Solusinya white-space: nowrap;tidak benar karena TIDAK menampilkan tab dan masih akan runtuh beberapa spasi (@John Conde).

  • nowrap: Menentukan nowrap memastikan bahwa urutan spasi putih akan runtuh menjadi karakter ruang tunggal, tetapi jeda baris akan ditekan.
  • pre: Menentukan pra memastikan bahwa urutan spasi putih tidak akan runtuh. Baris hanya terputus pada baris baru di markup (atau jika "\ a" muncul dalam konten yang dihasilkan).

dari: http://reference.sitepoint.com/css/white-space

feeela
sumber
1
Anda benar tentang nilai yang white-spaceseharusnya predan tidak nowrap. Saya sudah mengoreksi jawaban saya.
John Conde