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?
4 Respostas
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:
<div>Teste</div>
Se está usando PHP, existe uma função que faz isso, a htmlentities
:
echo htmlentities('<div>Teste</div>');
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 <?php
.
-
2Eu 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 < > <? 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() );
Commented 24/04/2015 às 13:11 -
eu também posso fazer assim: <li>. Alterar o primeiro "<" que o navegador não irá renderizar, fica bem mais rápido (:. Commented 24/04/2015 às 13:14
-
1Sim @EstácioDiFabio, o jQuery irá pegar o html
$('pre').html()
e transformar em texto$('pre').text()
. A tagpre
, respeita "tudo" que estiver dentro dela, no caso os espaços em branco (não precisa usar
) e quebras de linhas (não precisa usar<br>
). Commented 24/04/2015 às 13:16
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>
-
4Interessante isso, eu não conhecia. Porém encontrei documentação dizendo que é um recurso obsoleto que pode ser removido dos browsers. 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> Commented 24/04/2015 às 13:28
-
3essa é 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) Commented 24/04/2015 às 13:37
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).
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
$('pre').text( $('pre').html() );
.