Eu tenho uma classe em CSS que se chama .codigo
. Eu queria que quando eu fosse usá-la, ela removesse a formatação HTML (exemplo: fazer que <font></font>
apareça igual está aparecendo aqui no SO PT, usando o método .text()
) e deixasse o span do mesmo estilo especificado pela classe. Como eu faço para interagir JS, jQuery e CSS?
2 Respostas
Com jQuery e CSS, você pode recuperar o HTML e setar esse conteúdo como texto:
$('.classe').text($('.classe').html())
E então definir um CSS para a fonte ficar com o espaçamento correto:
.classe {
display: block;
font-family: monospace;
white-space: pre;
}
Veja o exemplo no jsfiddle.
No entanto, eu desaconselho a usar esse esquema pois pode sofrer um ataque de XSS no caso de mostrar conteúdo de usuário. O ideal seria você fazer um escape do HTML no lado do servidor.
Update
Sem Javascript, seria possível colocar o HTML dentro de um <textarea>
ou substituindo os caracteres especiais do HTML no servidor:
Exemplos:
<textarea>Código <strong>html</strong> aqui!</textarea>
<pre>Código <strong>html</strong> aqui!</pre>
Veja o jsfiddle desse exemplo.
Uma forma de substituir os caracteres usando php é com a função htmlentities
.
Note que o textarea
também é vulnerável ao Cross Site Scripting, por exemplo se um usuário conseguir escrever um valor como o apresentado a seguir:
</textarea><script>....</script><textarea>
-
1
-
Isso também funciona se, por exemplo, eu quiser colocar um fundo azul?– user2692Commented 11/02/2014 às 17:37
-
@LucasHenrique Acrescente o atributo
background-color: #AAAAFF
no CSS. Claro, ajuste a cor para sua necessidade.– utluizCommented 11/02/2014 às 17:38 -
E utluiz, há como fazer isso sem JS? Sério, eu realmente não sou muito fan de JS, apesar de todo mundo usar em todas as coisas.– user2692Commented 11/02/2014 às 18:05
-
@LucasHenrique Atualizei a resposta com as opções de textarea e
pre
.– utluizCommented 11/02/2014 às 18:11
Se você está querendo adicionar a sua formatação em uma tag especifica do seu HTML, seria algo assim:
$(document).ready(function () {
$('font').addClass('codigo');
});
Isso vai adicionar sua classe código em todas as tag font
após o carregamento.
Mas você pode obter o mesmo resultado modificando seu CSS dessa maneira:
.codigo, font {
/* meu estilo */
}
No caso a virgula indica que as mesmas regras que se aplicam a classe .codigo
vão se aplicar a todos elementos <font>
da sua página.
<p>
igual no site, teria formatação HTML e sumiria.<font>
é uma tag que caiu em desuso, só é compatível até o HTML4, mas também não entendi qual o objetivo, tem como fazer um exemplo no jsfiddle?