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‘

Antworten:

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