3

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?

4
  • Não entendi direito. Coloque seu código ai na pergunta. Commented 11/02/2014 às 17:20
  • Não entendi onde entra o JS e jQuery, não seria só o caso de estilizar via css? Commented 11/02/2014 às 17:20
  • Não. Quero usar o CSS para remover formatação HTML. Por exemplo: <p> igual no site, teria formatação HTML e sumiria.
    – user2692
    Commented 11/02/2014 às 17:21
  • <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? Commented 11/02/2014 às 17:25

2 Respostas 2

5

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   &lt;strong&gt;html&lt;/strong&gt; 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>
7
  • 1
    Agora eu entendi o que ele queria! Commented 11/02/2014 às 17:35
  • Isso também funciona se, por exemplo, eu quiser colocar um fundo azul?
    – user2692
    Commented 11/02/2014 às 17:37
  • @LucasHenrique Acrescente o atributo background-color: #AAAAFF no CSS. Claro, ajuste a cor para sua necessidade.
    – utluiz
    Commented 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.
    – user2692
    Commented 11/02/2014 às 18:05
  • @LucasHenrique Atualizei a resposta com as opções de textarea e pre.
    – utluiz
    Commented 11/02/2014 às 18:11
1

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.

Você deve fazer log-in para responder a esta pergunta.