Wie man <pre> mit <div> imitiert

18

Ich veröffentliche Python-Code auf einer Website (das ist CMS). Ich habe ein Python-Skript, das jedes Python-Skript liest und ein syntax-farbiges HTML daraus macht. Dann kopiere ich diesen HTML-Code und füge ihn in das CMS-Bearbeitungsfenster ein.

Das Problem ist, dass mein Python-Syntax-Hervorhebungsskript <pre>tag verwendet, um Tabulatoren / Leerzeichen zu speichern, die in Python sehr wichtig sind. Das CMS entfernt jedoch aus unklaren Gründen das <pre>Tag. Admin hat mir gesagt , dass ich verwenden sollte <div>statt <pre>. Könnten Sie mir beim Stylen von helfen <div>, um die Formatierung des weißen Raums beizubehalten?

html css

— tnorgd
quelle

Johns Antwort ist in Ordnung für die gestellte Frage, obwohl dies die Semantik Ihres Inhalts ein wenig beeinträchtigt. In Bezug auf den CMS, der das Pre-Tag entfernt, haben einige Anwendungen eine Einstellung, die angibt, welche HTML-Elemente im Inhalt zulässig sind. Wenn Sie viel vorformatierten Text veröffentlichen, sollten Sie Ihren Administrator bitten, die für Ihre Anwendung vorhandenen Einstellungen anzupassen, anstatt Sie zu (offen) willkürlichen Problemumgehungen aufzufordern.

— Su‘

24

Das können Sie mit der CSS- white-spaceRegel machen:

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

Durch die in dieser Regel enthaltenen Schriftarten erhält jedes Zeichen die gleiche Breite, die für Text in einem <pre>Tag üblich ist.

Denken Sie daran, dass sich alle Ihre <div>Tags auf diese Weise verhalten. Im Idealfall weisen Sie diesen <div>Tags eine Klasse zu, die sich nur auf die Tags auswirkt, die Sie imitieren möchten <pre>. Etwas wie:

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

Oder, noch besser, verwenden Sie das <code>Tag, wenn es von Ihrem CMS nicht entfernt wird. Es verhält sich wie das <pre>Tag, ist jedoch semantisch korrekt für die Anzeige von Code.

— John Conde
quelle

2

+1 für Erwähnung <code>und Semantik. Beachten Sie, dass <code>Whitespace standardmäßig umgebrochen wird, sodass Sie es auch zuweisen müssen white-space:nowrap. Ist auch <pre>ein Blockelement, in dem <code>inline steht; so zu imitieren <pre>, display:blocksollte gegeben werden.

— Jari Keinänen

Lassen Sie "Courier New" weg, da die Standardschriftart der Voreinstellung Ihres Browsers genauer entspricht.

— access_granted

4

Um ein DIVwie ein zu formatieren PRE, benötigen Sie ein white-space: pre;für das DIV. Außerdem sollten Sie eine Monospace-Schriftart verwenden, wie in der ersten Antwort angegeben.

Die Lösung white-space: nowrap;ist nicht richtig, da keine Registerkarten angezeigt werden und trotzdem mehrere Leerzeichen ausgeblendet werden (@John Conde).

nowrap: Durch die Angabe von nowrap wird sichergestellt, dass Whitespace-Sequenzen in ein einzelnes Leerzeichen zerfallen, Zeilenumbrüche jedoch unterdrückt werden.
pre: Durch die Angabe von pre wird sichergestellt, dass Whitespace-Sequenzen nicht zusammenbrechen. Zeilen werden nur bei neuen Zeilen im Markup (oder beim Auftreten von "\ a" im generierten Inhalt) unterbrochen.

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

— Feeela
quelle

1

Sie sind richtig über den Wert der white-spacesollte preund nicht nowrap. Ich habe meine Antwort korrigiert.

— John Conde