21

Eu to fazendo a tradução de um livro para uma página HTML, ai no livro tem os códigos, mas como eu faço para o meu HTML exibir o meu código, HTML, PHP e JavaScript, sem executa-los?

3
  • Onde você está fazendo esse texto? HTML puro? Algum framework para blogs como wordpress, por exemplo? Commented 24/04/2015 às 13:05
  • Aqui tem um site para ajudar a modificar o html para texto: blogcrowds.com/resources/parse_html.php Commented 24/04/2015 às 13:06
  • Caso use jQuery pode fazer isso $('pre').text( $('pre').html() );.
    – KaduAmaral
    Commented 24/04/2015 às 13:12

4 Respostas 4

20

Você precisa escapar os caracteres que fazem suas tags serem interpretadas como HTML, o < e o >.

Por exemplo, em vez de:

<div>Teste</div>

use:

&lt;div&gt;Teste&lt;/div&gt;

Se está usando PHP, existe uma função que faz isso, a htmlentities:

echo htmlentities('<div>Teste</div>');

http://ideone.com/DEZduB

No caso de código PHP, basta dar saída dele sem o <?php inicial, e ele não será interpretado. Caso queira incluir o <?php no exemplo, use &lt;?php.

6
  • 2
    Eu pensei em indicar algum plugin que mostre códigos, tipo esse: alexgorbatchev.com/SyntaxHighlighter/manual/demo Commented 24/04/2015 às 13:08
  • Isso mesmo dessa forma funciona super bem. Eu utilizo o plugin Highligth.js para exibir os códigos porém ele executa com as tags < > <?, mas com &lt &gt &lt? ele não executa e mostra o código. Obrigado (: Commented 24/04/2015 às 13:11
  • Caso use jQuery pode fazer isso $('pre').text( $('pre').html() );
    – KaduAmaral
    Commented 24/04/2015 às 13:11
  • eu também posso fazer assim: &ltli>. Alterar o primeiro "<" que o navegador não irá renderizar, fica bem mais rápido (:. Commented 24/04/2015 às 13:14
  • 1
    Sim @EstácioDiFabio, o jQuery irá pegar o html $('pre').html() e transformar em texto $('pre').text(). A tag pre, respeita "tudo" que estiver dentro dela, no caso os espaços em branco (não precisa usar &nbsp;) e quebras de linhas (não precisa usar <br>).
    – KaduAmaral
    Commented 24/04/2015 às 13:16
14

Voce pode usar

<xmp>
  <p>Blah teste</p>
</xmp>

A tag xmp não precisa usar caracteres de escape. O resultado será:

<p>Blah teste</p>
7
  • 4
    Interessante isso, eu não conhecia. Porém encontrei documentação dizendo que é um recurso obsoleto que pode ser removido dos browsers.
    – bfavaretto
    Commented 24/04/2015 às 13:22
  • Sim, pode ser descontinuada no futuro, mas por enquanto é a solução mais simples. Um pena ser obsoleto. =) Commented 24/04/2015 às 13:25
  • Não é a solução mais simples o próprio site fala pra usar <pre> ou <code>
    – Adir Kuhn
    Commented 24/04/2015 às 13:28
  • 3
    essa é uma ótima técnica, mas dentro das tags <pre> <code> <xmp> <p> olar mundo </p> </xmp> </pre> </code>. O navegador renderiza todo o código por trás dos <pre> e <code>. Mas se for somente para HTML puro funciona super bem. Uma pena mesmo ser obsoleto. Commented 24/04/2015 às 13:32
  • 1
    @RenaroSantos saquei, mas mesmo obsoleto é uma ótima dica, também não conhecia (+1)
    – Adir Kuhn
    Commented 24/04/2015 às 13:37
5

Podes usar a tag pre e jQuery:

jQuery(document).ready(function($) {
   $('pre').each(function(index, el){
     $(this).text( $(this).html() );
   });
});
pre{
  background-color: rgba(0,0,0,0.08);
  border-left: 3px solid rgba(0,0,0,0.4);
  margin: 0;
  padding: 4px 6px;
}

pre.php::before{
  content: '<?php';
  display:block;
  margin:0 0 2px -3px;
}
pre.php::after{
  content: '?>';
  display:block;
  margin:2px 0 0 -3px;
}

hr{margin 7px 0; border-color: #999;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<pre>
   <p>
      Teste da tag 
      <strong>pre</strong>
   </p>
</pre>
<hr>
<pre class="php">
   $var = 'Hello World!';
   
   if (1 == 1)
     echo $var;
</pre>

Porém no caso do PHP, caso também esteja utilizando-o no lado do servidor, terá omitir a tag de abertura <?php (pode fazer a emissão dela por CSS).

-3

Eu cai aqui primeiramente por que tinha a mesma duvida "como exibir php na página sem executar". Acabou que eu não gostei das soluções propostas aqui e fui fazendo testes por conta própria e a solução não poderia ser mais simples. Basta apenas dar um 'ECHO' no conteúdo PHP que quer exibir, exemplo:

<?php 
  echo "
    <?php 
      function teste(valor) {
        alert(valor);
      }
      //Chamando a função 
      teste('Deu certo');
    ?>
  ";
?>

Espero que seja útil, abraços

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 .