Respostas:
Não , não existe. No próprio HTML, não há como escapar de alguns caracteres:
&
Como &
<
Como <
(Aliás, não há necessidade de escapar, >
mas as pessoas costumam fazê-lo por razões de simetria.)
E, é claro, você deve <pre><code>…</code></pre>
colocar o código HTML escapado resultante dentro de (a) preservar espaços em branco e quebras de linha e (b) marcá-lo como um elemento de código.
Todas as outras soluções, como agrupar seu código em um <textarea>
ou no <xmp>
elemento (obsoleto) , serão interrompidas . 1
XHTML que é declarado no navegador como XML (via Content-Type
cabeçalho HTTP ! - apenas definir a nãoDOCTYPE
é suficiente ) pode usar uma seção CDATA como alternativa:
<![CDATA[Your <code> here]]>
Mas isso só funciona em XML, não em HTML, e mesmo isso não é uma solução infalível, pois o código não deve conter o delimitador de fechamento ]]>
. Portanto, mesmo em XML, a solução mais simples e robusta é a de escape.
1 Caso em questão:
>
por # >
<
e &
precisa ser substituído, sem escape >
é válido dentro do HTML.
O método experimentado e verdadeiro para HTML:
&
primeiro e <
depois.
melhor maneira:
<xmp>
// your codes ..
</xmp>
amostras antigas:
amostra 1 :
<pre>
This text has
been formatted using
the HTML pre tag. The brower should
display all white space
as it was entered.
</pre>
amostra 2 :
<pre>
<code>
My pre-formatted code
here.
</code>
</pre>
amostra 3 : (se você estiver realmente "citando" um bloco de código, a marcação seria)
<blockquote>
<pre>
<code>
My pre-formatted "quoted" code here.
</code>
</pre>
</blockquote>
bom exemplo de CSS:
pre{
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
margin-bottom: 10px;
overflow: auto;
width: auto;
padding: 5px;
background-color: #eee;
width: 650px!ie7;
padding-bottom: 20px!ie7;
max-height: 600px;
}
Código de destaque da sintaxe (para trabalhos profissionais):
arco-íris (muito perfeito)
melhores links para você:
https://github.com/balupton/jquery-syntaxhighlighter
http://bavotasan.com/2009/how-to-wrap-text-within-the-pre-tag-using-css/
http://alexgorbatchev.com/SyntaxHighlighter/
Uma espécie de método ingênuo para exibir código incluirá em uma área de texto e adicionará um atributo desativado para que não seja editável.
<textarea disabled> code </textarea>
Espero que ajude alguém que esteja procurando uma maneira fácil de fazer as coisas.
A <xmp>
tag obsoleta basicamente faz isso, mas não faz mais parte da especificação XHTML. Ainda deve funcionar em todos os navegadores atuais.
Aqui está outra idéia, um truque de hack / salão, você pode colocar o código em uma área de texto da seguinte maneira:
<textarea disabled="true" style="border: none;background-color:white;">
<p>test</p>
</textarea>
Colocar colchetes angulares e códigos como esse em uma área de texto é HTML inválido e causará um comportamento indefinido em diferentes navegadores. No Internet Explorer, o HTML é interpretado, enquanto Mozilla, Chrome e Safari o deixam sem interpretação.
Se você quiser que não seja editável e pareça diferente, poderá estilizá-lo facilmente usando CSS. O único problema seria que os navegadores adicionariam essa pequena alça de arrasto no canto inferior direito para redimensionar a caixa. Ou então, tente usar uma tag de entrada.
A maneira correta de injetar código na área de texto é usar uma linguagem do lado do servidor como este PHP, por exemplo:
<textarea disabled="true" style="border: none;background-color:white;">
<?php echo '<p>test</p>'; ?>
</textarea>
Em seguida, ignora o interpretador html e coloca o texto não interpretado na área de texto de forma consistente em todos os navegadores.
Fora isso, a única maneira é realmente escapar do código se HTML estático ou usando métodos do lado do servidor, como o HtmlEncode () do .NET, se estiver usando essa tecnologia.
<textarea disabled="true" style="border: none;background-color:white; width:100%">
Eu assumo:
<
não deve precisar escaparTodas as suas opções estão nesta árvore:
<p>
)
<
"
e &thing;
precisam ser escapados: "
e &thing;
respectivamente<script>
e <style>
apenas</script
não é permitido em nenhum lugar<script>
<textarea>
e <title>
apenas<textarea>
é um bom candidato para quebrar o código</html>
lá</textarea
por razões óbvias
</textarea
ou similar&thing;
precisa escapar: &thing;
Nota: >
nunca precisa escapar. Nem mesmo em elementos normais.
<script>
e <style>
podem ser exibidas, basta colocá-las dentro de <body>
with style="display: block; white-space: pre;"
e type="text/html"
ou algo se você não quiser que seja executado como JavaScript. Acho que é um truque muito bom, bom para programação e ensino. Também <xmp>
ainda é implementado nos principais navegadores, embora esteja obsoleto.
<xmp>
não é HTML5 válido, mas seu outro truque parece adequado!
Se seu objetivo é mostrar um pedaço de código que você está executando em outro lugar da mesma página, você pode usar o textContent (é puro-js e é bem suportado: http://caniuse.com/#feat=textcontent )
<div id="myCode">
<p>
hello world
</p>
</div>
<div id="loadHere"></div>
document.getElementById("myCode").textContent = document.getElementById("loadHere").innerHTML;
Para obter a formatação de várias linhas no resultado, você precisa definir o estilo css "espaço em branco: pré;" na div de destino e escreva as linhas individualmente usando "\ r \ n" no final de cada uma.
Aqui está uma demonstração: https://jsfiddle.net/wphps3od/
Este método tem uma vantagem sobre o uso da área de texto: o código não será reformatado como faria em uma área de texto. (Coisas como
são removidas inteiramente em uma área de texto)
<template>
ou algo que normalmente não é renderizado.
Em última análise, a melhor resposta (embora irritante) é "escapar do texto".
No entanto, existem muitos editores de texto - ou até mini-utilitários independentes - que podem fazer isso automaticamente. Portanto, você nunca precisará escapá-lo manualmente, se não quiser (a menos que seja uma mistura de código com e sem escape ...)
A pesquisa rápida do Google mostra-me esta, por exemplo: http://malektips.com/zzee-text-utility-html-escape-regular-expression.html
<textarea ><?php echo htmlentities($page_html); ?></textarea>
funciona bem para mim ..
"tendo em mente a Alexander's
sugestão, eis por que acho que essa é uma boa abordagem"
se tentarmos simplificar <textarea>
, talvez nem sempre funcione, pois pode haver textarea
tags de fechamento que podem fechar incorretamente a tag pai e exibir o restante da fonte HTML no documento pai, o que pareceria estranho.
O uso de htmlentities
converte todos os caracteres aplicáveis, como < >
entidades HTML, o que elimina qualquer possibilidade de vazamento.
Talvez haja benefícios ou deficiências nessa abordagem ou uma maneira melhor de obter os mesmos resultados. Se assim for, comente como eu gostaria de aprender com eles :)
Você pode usar uma linguagem do lado do servidor como PHP para inserir texto bruto:
<?php
$str = <<<EOD
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Minimal HTML5">
<meta name="keywords" content="HTML5,Minimal">
<title>This is the title</title>
<link rel='stylesheet.css' href='style.css'>
</head>
<body>
</body>
</html>
EOD;
?>
depois despeje o valor de $str
htmlencoded:
<div style="white-space: pre">
<?php echo htmlentities($str); ?>
</div>
Na verdade não é uma maneira de fazer isso. Possui limitação (uma), mas é 100% padrão, não é preterido (como xmp) e funciona.
E é trivial. Aqui está:
<div id="mydoc-src" style="display: none;">
LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo
<!--
YOUR CODE HERE.
<script src="WidgetsLib/all.js"></script>
^^ This is a text, no side effects trying to load it.
-->
LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo
</div>
Por favor, deixe-me explicar. Primeiro, o comentário HTML comum faz o trabalho, para impedir que todo o bloco seja interpretado. Você pode adicionar facilmente quaisquer tags, todas elas serão ignoradas. Ignorado da interpretação, mas ainda disponível via innerHTML
! Portanto, o que resta é obter o conteúdo e filtrar os tokens de comentários anteriores e finais.
Exceto (lembre-se - a limitação) que você não pode colocar comentários em HTML, pois (pelo menos no meu Chrome) o aninhamento deles não é suportado e o primeiro '->' encerrará o programa.
Bem, é uma pequena limitação desagradável, mas em certos casos não é um problema, se o seu texto estiver livre de comentários em HTML. E, é mais fácil escapar de uma construção, depois de um monte delas.
Agora, o que é essa LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo
corda estranha ? É uma sequência aleatória, como um hash, improvável de ser usada no bloco e usada para? Aqui está o contexto, por que eu o usei. No meu caso, peguei o conteúdo de um DIV, depois o processei com a marcação Showdown e a saída atribuída a outra div. A idéia era escrever anotações em linha no arquivo HTML e apenas abrir em um navegador e isso se transformaria rapidamente na carga. Então, no meu caso, <!--
foi transformado em <p><!--</p>
, o comentário escapou adequadamente. Funcionou, mas poluiu a tela. Portanto, para removê-lo facilmente com o regex, a sequência aleatória foi usada. Aqui está o código:
var converter = new showdown.Converter();
converter.setOption('simplifiedAutoLink', true);
converter.setOption('tables', true);
converter.setOption('tasklists', true);
var src = document.getElementById("mydoc-src");
var res = document.getElementById("mydoc-res");
res.innerHTML = converter.makeHtml(src.innerHTML)
.replace(/<p>.{0,10}LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo.{0,10}<\/p>/g, "");
src.innerHTML = '';
E isso funciona.
Se alguém estiver interessado, este artigo foi escrito usando esta técnica. Sinta-se livre para fazer o download e procure dentro do arquivo HTML.
Depende do que você está usando. É entrada do usuário? Então use <textarea>
e escape de tudo. No meu caso, e provavelmente também é o seu caso, eu simplesmente usei comentários, e ele faz o trabalho.
Se você não usa a remarcação e deseja obtê-la como está em uma tag, é ainda mais simples:
<div id="mydoc-src" style="display: none;">
<!--
YOUR CODE HERE.
<script src="WidgetsLib/all.js"></script>
^^ This is a text, no side effects trying to load it.
-->
</div>
e código JavaScript para obtê-lo:
var src = document.getElementById("mydoc-src");
var YOUR_CODE = src.innerHTML.replace(/(<!--|-->)/g, "");
Existem algumas maneiras de escapar de tudo em HTML, nenhuma delas agradável.
Ou você pode colocar um iframe
que carrega um arquivo de texto antigo simples.
Este é de longe o melhor método para a maioria das situações:
<pre><code>
code here, escape it yourself.
</code></pre>
Eu teria votado na primeira pessoa que sugeriu, mas não tenho reputação. Senti-me compelido a dizer algo, no entanto, para o bem das pessoas que tentam encontrar respostas na Internet.
Foi assim que eu fiz:
$str = file_get_contents("my-code-file.php");
echo "<textarea disabled='true' style='border: none;background-color:white;'>";
echo $str;
echo "</textarea>";
function escapeHTML(string)
{
var pre = document.createElement('pre');
var text = document.createTextNode(string);
pre.appendChild(text);
return pre.innerHTML;
}//end escapeHTML
ele retornará o HTML escapado
Você poderia tentar:
Hello! Here is some code:
<xmp>
<div id="hello">
</div>
</xmp>
Pode não funcionar em todas as situações, mas colocar trechos de código dentro de a textarea
exibirá-os como código.
Você pode estilizar a área de texto com CSS se não desejar que ela se pareça com uma área de texto real.
Isso é meio complicado, mas podemos usar algo como:
body script {
display: block;
font-family: monospace;
white-space: pre;
}
<script type="text/html">
<h1>Hello World</h1>
<ul>
<li>Enjoy this dodgy hack,
<li>or don't!
</ul>
</script>
Com esse CSS, o navegador exibirá scripts dentro do corpo. Ele não tentará executar esse script, pois possui um tipo desconhecido text/html
. Não é necessário escapar de caracteres especiais dentro de a <script>
, a menos que você queira incluir uma </script>
tag de fechamento .
Estou usando algo parecido com isto para exibir JavaScript executável no corpo da página, para uma espécie de "programação alfabética".
Há mais informações nesta pergunta Quando as tags devem estar visíveis e por que podem? .
//To show xml tags in table columns you will have to encode the tags first
function htmlEncode(value) {
//create a in-memory div, set it's inner text(which jQuery automatically encodes)
//then grab the encoded contents back out. The div never exists on the page.
return $('<div/>').text(value).html();
}
html = htmlEncode(html)
Uma combinação de algumas respostas que funcionam juntas aqui:
function c(s) {
return s.split("<").join("<").split(">").join(">").split("&").join("&")
}
displayMe.innerHTML = ok.innerHTML;
console.log(
c(ok.innerHTML)
)
<textarea style="display:none" id="ok">
<script>
console.log("hello", 5&9);
</script>
</textarea>
<div id="displayMe">
</div>