Cómo imitar <pre> con <div>

18

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?

html css

— tnorgd
fuente

La respuesta de John está bien para la pregunta específica que se hace, aunque esto degrada un poco la semántica de su contenido. Con respecto al CMS que elimina la etiqueta previa, algunas aplicaciones tienen una configuración que especifica qué HTML está permitido en el contenido. Si publica una gran cantidad de texto preformateado, puede valer la pena pedirle a su administrador que considere ajustar eso si existe para su aplicación, en lugar de pedirle que use (francamente) soluciones arbitrarias.

— Su '

24

Puedes hacerlo con la white-spaceregla CSS :

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

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:

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

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.

— John Conde
fuente

2

+1 por mencionar <code>y semántica. Tenga en cuenta que <code>ajusta el espacio en blanco de forma predeterminada, por lo que también debe asignarlo white-space:nowrap. También <pre>es un elemento de bloque donde <code>está en línea; así que para imitar <pre>, se display:blockdebe dar.

— Jari Keinänen

Omita "Courier New", la fuente predeterminada coincide más con la pre de su navegador.

— acceso otorgado el

4

Para formatear un DIVlike an PRE, necesita un white-space: pre;para el DIV. 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

— feeela
fuente

1

Tienes razón sobre el valor de white-spacedebería ser prey no nowrap. He corregido mi respuesta.

— John Conde