7

Como posso exibir meu código HTML? Tenho um campo onde o usuário pode alterar o nick dele colocando cores, e quero exibir o código usado como dica para o usuário.

Meu código:

<pre>
  <code>
    <span style="color: red">Guizoio</span>
  </code>
</pre>

Só que não funciona ele não exibe o HTML e sim Guizoio em vermelho.

2 Respostas 2

7

Consegui resolver, para exibirmos um código HTML em um site ou blog, não podemos simplesmente inserir o código na página normalmente (mesmo dentro de uma caixa de texto), porque o navegador tentaria interpretar o código e ele não seria exibido.

Para exibir um código devemos substituir as chaves:

< por &lt;

e chave

> por &gt;

Fonte http://pc286.blogspot.com.br/2009/01/como-exibir-cdigos-tags-html-ou.html

6

Como alternativa a solução de escapar/substituir os caracteres pode-se usar <textarea> para exibir o código. Basta utilizar a propriedade readonly e remover as bordas do elemento:

textarea {
  border: none;
  resize: none
}
<textarea readonly rows='10' cols='40'>
  
<!doctype html>
<html lang='pt-br'>
  <head>
    <title>StackOverflow pt</title>
  </head>
  <body>
    <!-- ... -->
  </body>
</html>
</textarea>

Somente a como curiosidade: existia a tag <xmp> que permitia exibir texto sem interpretá-lo como HTML. Em alguns navegadores, o código abaixo ainda pode funcionar. Lembrando que é uma tag obsoleta e seu uso é desencorajado, o snippet é somente a título de curiosidade mesmo:

<xmp>
  <!doctype html>
  <html lang='pt-br'>
    <head>
      <title>StackOverflow pt</title>
    </head>
    <body>
      <!-- ... -->
    </body>
  </html>
</xmp>

1
  • 1
    Opa renan, consegui resolver, achei até um plugin run_prettify.js e tudo funcionou perfeitamente. Mas obrigado pela sua resposta. Commented 24/08/2016 às 3:39

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .