Comment imiter <pre> avec <div>

19

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

Le problème est que mon script de mise en évidence de la syntaxe python utilise une <pre>balise pour garder les tabulations / espaces qui sont assez importants en python. Le CMS, cependant, pour des raisons peu claires, supprime la <pre>balise. L'administrateur m'a dit que je devrais utiliser à la <div>place de <pre>. Pourriez-vous m'aider à créer un style <div>pour conserver la mise en forme dans l'espace?

html css tnorgd
la source
La réponse de John est très bien pour la question spécifique posée, bien que cela dégrade un peu la sémantique de votre contenu. Concernant le CMS supprimant la balise pre, certaines applications ont un paramètre qui spécifie quel HTML est autorisé dans le contenu. Si vous publiez beaucoup de texte pré-formaté, il peut être utile de demander à votre administrateur de l'ajuster s'il existe pour votre application, plutôt que de vous dire d'utiliser (franchement) des solutions de contournement arbitraires.
Di

Réponses:

25

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

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

Les polices incluses dans cette règle donnent à chaque caractère la même largeur qui est la mise en forme courante du texte dans une <pre>balise.

Gardez à l'esprit que tous vos <div>tags se comporteront ainsi. Idéalement, vous attribuerez à ces <div>balises une classe 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 <code>balise si elle n'est pas supprimée par votre CMS. Il agit comme la <pre>balise mais est sémantiquement correct pour afficher le code.

John Conde
la source
2
+1 pour la mention <code>et la sémantique. Notez que les <code>espaces sont encapsulés par défaut, vous devez donc également les affecter white-space:nowrap. Est également <pre>un élément de bloc où <code>est en ligne; donc pour imiter <pre>, display:blockdevrait être donné.
Jari Keinänen
Omettez "Courier New", la police par défaut correspond plus étroitement à celle de votre navigateur.
access_granted
4

Pour formater un DIVcomme un PRE, vous avez besoin d'un white-space: pre;pour le DIV. De plus, vous devez utiliser une police à espacement fixe, 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 réduit toujours plusieurs espaces (@John Conde).

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

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

feeela
la source
1
Vous avez raison sur la valeur de white-spacedevrait être preet non nowrap. J'ai corrigé ma réponse.
John Conde