web-dev-qa-db-fra.com

Comment imiter <pre> avec <div>

Je publie du code python sur un site Web (c'est-à-dire un CMS). J'ai un script python qui lit n'importe quel script python et en fait un code HTML de couleur syntaxe. Ensuite, je copie/colle ce code HTML dans la fenêtre de modification du CMS.

Le problème est que mon script de coloration syntaxique python utilise la balise <pre> pour conserver les tabulations/espaces qui sont assez importants en python. Le CMS, cependant, pour des raisons peu claires, supprime la balise <pre>. L'administrateur m'a dit que je devrais utiliser <div> au lieu de <pre>. Pourriez-vous m'aider à styler un <div> pour conserver le formatage d'espace libre?

htmlcss
17
tnorgd

Vous pouvez le faire avec la règle CSS white-space:

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

Les polices incluses dans cette règle attribuent à chaque caractère la même largeur que celle utilisée pour la mise en forme de texte dans une balise <pre>.

N'oubliez pas que cela fera que toutes vos balises <div> se comportent de cette manière. Idéalement, vous affecterez une classe à ces balises <div> pour n’affecter que celles que vous souhaitez imiter <pre>. Quelque chose comme:

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

Ou, mieux encore, utilisez la balise <code> si elle n'est pas supprimée par votre CMS. Il agit comme la balise <pre> mais est sémantiquement correct pour l'affichage du code.

23
John Conde

Pour formater un DIV comme un PRE, vous avez besoin d'un white-space: pre; pour le DIV. De plus, vous devez utiliser une police monospace, comme indiqué dans la première réponse.

La solution white-space: nowrap; n’est pas correcte car elle n’affiche PAS les onglets et continue de réduire plusieurs espaces (@John Conde).

  • nowrap: La spécification de nowrap garantit que les séquences d'espaces seront réduites en un seul caractère d'espacement, mais que les sauts de ligne seront supprimés.
  • pre: La spécification de pré garantit que les séquences d’espaces ne seront pas réduites. Les lignes ne sont rompues que sur les nouvelles lignes du balisage (ou sur les occurrences de "\ a" dans le contenu généré).

à partir de: http://reference.sitepoint.com/css/white-space

3
feeela