Come imitare <pre> con <div>

18

Sto pubblicando il codice Python su un sito Web (ovvero CMS). Ho uno script Python che legge qualsiasi script Python e ne ricava un HTML colorato di sintassi. Quindi copio / incollo questo HTML nella finestra di modifica del CMS.

Il problema è che il mio script di evidenziazione della sintassi di Python utilizza <pre>tag per mantenere le schede / gli spazi che sono abbastanza importanti in Python. Il CMS, tuttavia, per alcuni motivi poco chiari, rimuove il <pre>tag. L'amministratore mi ha detto che avrei dovuto usare <div>invece di <pre>. Potresti aiutarmi nello styling a <div>per mantenere la formattazione dello spazio wihte?

html css

— tnorgd
fonte

La risposta di John va bene per la domanda specifica posta, anche se questo degrada un po 'la semantica dei tuoi contenuti. Per quanto riguarda il CMS che elimina il pre tag, alcune applicazioni hanno un'impostazione che specifica quale HTML è consentito nel contenuto. Se pubblichi molto testo preformattato, potrebbe valere la pena di chiedere al tuo amministratore di cercare di modificarlo se esiste per la tua applicazione, piuttosto che dirti di usare soluzioni (francamente) arbitrarie.

— Su '

24

Puoi farlo con la white-spaceregola CSS :

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

I caratteri inclusi in quella regola rendono ogni carattere della stessa larghezza che è la formattazione comune per il testo in un <pre>tag.

Tieni presente che questo farà sì che tutti i tuoi <div>tag si comportino in questo modo. Idealmente, assegneresti a quei <div>tag una classe in modo da influire solo su quelli che vuoi imitare <pre>. Qualcosa di simile a:

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

O, meglio ancora, usa il <code>tag se non è eliminato dal tuo CMS. Funziona come il <pre>tag ma è semanticamente corretto per la visualizzazione del codice.

— John Conde
fonte

2

+1 per menzione <code>e semantica. Si noti che <code>avvolge gli spazi bianchi per impostazione predefinita, quindi è necessario assegnare anche white-space:nowrapa esso. Inoltre <pre>è un elemento a blocchi in cui <code>è in linea; così da imitare <pre>, display:blockdovrebbe essere dato.

— Jari Keinänen,

Ometti "Courier New", il carattere predefinito corrisponde più attentamente alle pre del tuo browser.

— access_granted

4

Per formattare un DIVlike PRE, è necessario un white-space: pre;per DIV. Inoltre, è necessario utilizzare un carattere monospace, come indicato nella prima risposta.

La soluzione white-space: nowrap;non è corretta in quanto NON visualizza le schede e continua a comprimere più spazi (@John Conde).

nowrap: La specifica di nowrap assicura che le sequenze di spazi bianchi collassino in un singolo carattere di spazio, ma le interruzioni di riga verranno eliminate.
pre: La specifica di pre garantisce che le sequenze di spazi bianchi non collassino. Le righe vengono interrotte solo nelle nuove righe del markup (o in occorrenze di "\ a" nel contenuto generato).

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

— feeela
fonte

1

Hai ragione sul valore di white-spacedovrebbe essere pree non nowrap. Ho corretto la mia risposta.

— John Conde