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?
Respostas:
Você pode fazer isso com a
white-space
regra CSS :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: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.fonte
<code>
e semântica. Observe que os<code>
espaços em branco são agrupados por padrão, portanto você também deve atribuirwhite-space:nowrap
a ele. Também<pre>
é um elemento de bloco onde<code>
está embutido; para imitar<pre>
,display:block
deve ser dado.Para formatar um
DIV
como umPRE
, você precisa de umwhite-space: pre;
para oDIV
. 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
fonte
white-space
deveria serpre
e nãonowrap
. Eu corrigi minha resposta.