Estoy publicando código de Python en un sitio web (es decir, CMS). Tengo un script de Python que lee cualquier script de Python y crea un HTML de color de sintaxis. Luego copio / pego este HTML en la ventana de edición de CMS.
El problema es que mi script de resaltado de sintaxis de Python usa la <pre>
etiqueta para mantener pestañas / espacios que son bastante importantes en Python. Sin embargo, el CMS, por algunas razones poco claras, elimina la <pre>
etiqueta. El administrador me dijo que debería usar en <div>
lugar de <pre>
. ¿Podría ayudarme a diseñar un <div>
para mantener el formato wihte-space?
Respuestas:
Puedes hacerlo con la
white-space
regla CSS :Las fuentes incluidas en esa regla hacen que cada carácter tenga el mismo ancho que es el formato común para el texto en una
<pre>
etiqueta.Tenga en cuenta que esto hará que todas sus
<div>
etiquetas se comporten de esta manera. Idealmente, asignará a esas<div>
etiquetas una clase para afectar solo las que desee imitar<pre>
. Algo como:O, mejor aún, use la
<code>
etiqueta si su CMS no la elimina. Actúa como la<pre>
etiqueta pero es semánticamente correcto para mostrar el código.fuente
<code>
y semántica. Tenga en cuenta que<code>
ajusta el espacio en blanco de forma predeterminada, por lo que también debe asignarlowhite-space:nowrap
. También<pre>
es un elemento de bloque donde<code>
está en línea; así que para imitar<pre>
, sedisplay:block
debe dar.Para formatear un
DIV
like anPRE
, necesita unwhite-space: pre;
para elDIV
. Además, debe usar una fuente monoespacio, como se indica en la primera respuesta.La solución
white-space: nowrap;
no es correcta ya que NO muestra pestañas y aún colapsará múltiples espacios (@John Conde).nowrap
: Especificar nowrap asegura que las secuencias de espacios en blanco colapsarán en un solo carácter de espacio, pero se suprimirán los saltos de línea.pre
: Especificar pre garantiza que las secuencias de espacios en blanco no colapsarán. Las líneas solo se dividen en las nuevas líneas en el marcado (o cuando aparece "\ a" en el contenido generado).de: http://reference.sitepoint.com/css/white-space
fuente
white-space
debería serpre
y nonowrap
. He corregido mi respuesta.