<div> ile <pre> nasıl taklit edilir

19

Bir web sitesinde (yani CMS) python kodu yayınlıyorum. Herhangi bir python komut dosyasını okur ve sözdizimi renkli bir HTML dışarı yapar bir python komut dosyası var. Sonra bu HTML'yi CMS düzenleme penceresine kopyalayıp yapıştırıyorum.

Sorun benim python sözdizimi vurgulama komut dosyası <pre>python oldukça önemli sekmeleri / boşlukları tutmak için etiket kullanır . Bununla birlikte, CMS bazı belirsiz nedenlerden dolayı <pre>etiketi kaldırır . Yönetici <div>bunun yerine kullanmam gerektiğini söyledi <pre>. <div>Geniş alan biçimlendirmesini korumak için a tasarımında bana yardımcı olabilir misiniz ?

html css

— tnorgd
kaynak

John'un cevabı, sorulan belirli soru için iyidir, ancak bu, içeriğinizin anlambilimini biraz bozar. Ön etiketi sıyırma CMS ile ilgili olarak, bazı uygulamaların içerikte hangi HTML'ye izin verildiğini belirten bir ayarı vardır. Çok sayıda önceden biçimlendirilmiş metin gönderirseniz, yöneticinizden uygulamanız için varsa, (açıkçası) rasgele geçici çözümler kullanmanız gerektiğini söylemekten ziyade ayarlama yapmasını istemeye değer olabilir.

— Su '

25

Bunu CSS white-spacekuralıyla yapabilirsiniz:

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

Bu kurala dahil edilen yazı tipleri, her karakteri, bir <pre>etiketteki metin için ortak biçimlendirmeyle aynı genişliğe getirir .

Bunun tüm <div>etiketlerinizin bu şekilde davranmasını sağlayacağını unutmayın. İdeal olarak, bu <div>etiketleri yalnızca taklit etmek istediklerinizi etkilemek için bir sınıf atarsınız <pre>. Gibi bir şey:

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

Veya, daha iyisi, <code>CMS'niz tarafından çıkarılmadıysa etiketi kullanın . <pre>Etiket gibi davranır, ancak kodu görüntülemek için anlamsal olarak doğrudur.

— John Conde
kaynak

2

Söz <code>ve anlambilim için +1 . O Not <code>atamak gerekir böylece sarar varsayılan olarak beyaz boşluk white-space:nowrapçok ona. Ayrıca satır içi <pre>olan bir blok elemanıdır <code>; böylece taklit için <pre>, display:blockdikkat edilmelidir.

— Jari Keinänen

"Courier New" seçeneğini atlayın, varsayılan yazı tipi tarayıcınızın öncesi ile daha yakından eşleşir.

— access_granted

4

Bir biçimlendirmek için DIVbir benzeri PRE, bir ihtiyaç white-space: pre;için DIV. Ayrıca, ilk yanıtta belirtildiği gibi bir tek aralıklı yazı tipi kullanmalısınız.

Çözüm white-space: nowrap;sekmeleri görüntülemediğinden doğru değil ve yine de birden fazla alanı daraltacaktır (@John Conde).

nowrap: Nowrap belirtmek, beyaz boşluk dizilerinin tek bir boşluk karakterine daralmasını sağlar, ancak satır kesmeleri bastırılır.
pre: Ön öğenin belirtilmesi boşluk alanlarının çökmemesini sağlar. Satırlar yalnızca biçimlendirmedeki yeni satırlarda (veya oluşturulan içerikte "\ a" oluşumlarında) kesilir.

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

— feeela
kaynak

1

white-spaceOlması gereken değer konusunda prehaklısınız nowrap. Cevabımı düzelttim.

— John Conde