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>