Como imitar <pre> com <div>

18

Estou publicando código python em um site (que é CMS). Eu tenho um script python que lê qualquer script python e cria um HTML colorido com sintaxe. Em seguida, copio / colo esse HTML na janela de edição do CMS.

O problema é que meu script de destaque de sintaxe python usa <pre>tag para manter tabulações / espaços bastante importantes em python. O CMS, no entanto, por alguns motivos pouco claros, remove a <pre>marca. Admin me disse que eu deveria usar em <div>vez de <pre>. Você poderia me ajudar a <div>criar um estilo para manter a formatação de espaço em branco?

html css

— tnorgd
fonte

A resposta de John é boa para a pergunta específica feita, embora isso prejudique um pouco a semântica do seu conteúdo. Em relação ao CMS que remove a tag pré, alguns aplicativos têm uma configuração que especifica qual HTML é permitido no conteúdo. Se você publicar um monte de texto pré-formatado, pode valer a pena pedir ao administrador para ajustar se ele existe para o seu aplicativo, em vez de pedir para você usar soluções (arbitrárias) arbitrárias.

— Su '

24

Você pode fazer isso com a white-spaceregra CSS :

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

As fontes incluídas nessa regra tornam cada caractere da mesma largura, formatação comum para o texto em uma <pre>marca.

Lembre-se de que isso fará com que todas as suas <div>tags se comportem dessa maneira. Idealmente, você atribuirá a essas <div>tags uma classe para afetar apenas as que deseja imitar <pre>. Algo como:

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

Ou, melhor ainda, use a <code>tag se ela não for removida pelo seu CMS. Ele age como a <pre>tag, mas é semanticamente correto para a exibição do código.

— John Conde
fonte

2

+1 para menção <code>e semântica. Observe que os <code>espaços em branco são agrupados por padrão, portanto você também deve atribuir white-space:nowrapa ele. Também <pre>é um elemento de bloco onde <code>está embutido; para imitar <pre>, display:blockdeve ser dado.

— Jari Keinänen

Omitir "Courier New", a fonte padrão corresponde à pré do seu navegador mais de perto.

— ACCESS_GRANTED

4

Para formatar um DIVcomo um PRE, você precisa de um white-space: pre;para o DIV. Além disso, você deve usar uma fonte monoespaçada, conforme declarado na primeira resposta.

A solução white-space: nowrap;não está correta, pois NÃO exibe guias e ainda recolherá vários espaços (@John Conde).

nowrap: Especificar nowrap garante que as seqüências de espaço em branco sejam recolhidas em um único caractere de espaço, mas as quebras de linha serão suprimidas.
pre: Especificar pré garante que as seqüências de espaço em branco não entrem em colapso. As linhas são quebradas apenas nas novas linhas da marcação (ou nas ocorrências de "\ a" no conteúdo gerado).

from: http://reference.sitepoint.com/css/white-space

— feeela
fonte

1

Você está correto sobre o valor de white-spacedeveria ser pree não nowrap. Eu corrigi minha resposta.

— John Conde