Exibir trechos de HTML em HTML


208

Como posso mostrar trechos de HTML em uma página da Web sem precisar substituir cada um <por &lt;e >com &gt;?

Em outras palavras, existe uma tag para não renderizar HTML até você clicar na tag de fechamento ?

Respostas:


95

Não , não existe. No próprio HTML, não há como escapar de alguns caracteres:

  • & Como &amp;
  • < Como &lt;

(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-Typecabeç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:


Agradável. Então isso faz parte do padrão HTML? Ou é mais profundo, como parte do padrão xml?
aioobe

7
Em HTML, isso renderizará `here]]>`
Dolph

3
Sim, esta é uma boa resposta, mas não se esqueça de substituir >por # &gt;
Alan Alan

2
@ Alan Eu faria isso também, mas na verdade não é necessário : apenas <e &precisa ser substituído, sem escape >é válido dentro do HTML.
Konrad Rudolph

1
@ SamWatkins Mas sua solução não é mais fácil que a minha . Você acabou de mudar o que precisa ser evitado e sua solução é hacky, como você admite. Não há literalmente nenhuma vantagem em fazê-lo corretamente. Este é um problema resolvido com uma solução correta. Não há necessidade de hacks, a menos que toda a configuração seja hacky.
Konrad Rudolph

161

O método experimentado e verdadeiro para HTML:

  1. Substitua o &personagem por&amp;
  2. Substitua o <personagem por&lt;
  3. Substitua o >personagem por&gt;
  4. Opcionalmente, envolva sua amostra de HTML com <pre>e / ou <code>tags.

17
Dica: Para acelerar a substituição do código HTML, você pode usar o Notepad ++ com a extensão 'TextFX'. Marque o texto, vá ao menu> TextFX> TextFX Convert> Encode HTML (& <> ") → Concluído.
Kai Noack

2
Existe alguma biblioteca JavaScript existente que possa fazer isso, por acaso?
12133 Anderson Green

9
Isso não responde à pergunta, que dizia "sem precisar substituir ...". Além disso, a substituição de ">" é desnecessária.
Jukka K. Korpela

2
E a ordem também é importante. Certifique-se de lidar com o &primeiro e <depois.
Tolga Evcimen

151

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)

embelezar

syntaxhighlighter

realçar

JSHighlighter


melhores links para você:

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-add-syntax-highlighting-to-any-project/

https://github.com/balupton/jquery-syntaxhighlighter

http://bavotasan.com/2009/how-to-wrap-text-within-the-pre-tag-using-css/

http://alexgorbatchev.com/SyntaxHighlighter/

https://code.google.com/p/jquery-chili-js/

Como destacar o código fonte em HTML?


4
Os elementos usados ​​na resposta não abordam a questão: eles não afetam a interpretação de "<" iniciar uma tag.
Jukka K. Korpela

7
developer.mozilla.org/pt-BR/docs/Web/HTML/Element/xmp diz: " Não use este elemento . Ele foi descontinuado desde o HTML3.2 e não foi implementado de forma consistente. Foi completamente removido do a linguagem em HTML5 ".
Nick Rice

50

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.


7
Somente leitura pode ser um atributo melhor do que desativado, para que você possa destacar o texto nele. Também é possível adicionar um estilo que retira todos os recursos que o fazem parecer um elemento de entrada, embora seja secundário.
Tarquin

2
Solução incrível. Obrigado
Apit John Ismail

1
E comercial ainda será interpretado. por exemplo, & nbsp; será renderizado como um espaço sem quebra real. Mas boa resposta, no entanto, é ideal para algo que eu quero fazer.
Nick Rice

1
Eu tentei de várias maneiras, e esta é a única maneira que funciona para mim. Muito obrigado.
William Hou

25

Preterido , mas funciona no FF3 e no IE8.

<xmp>
   <b>bold</b><ul><li>list item</li></ul>
</xmp>

Recomendado:

<pre><code>
    code here, escape it yourself.
</code></pre>


12

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.


1
essa é uma ideia horrível. E se fosse exibido um html dinâmico e alguém fizesse o seguinte. <? php echo '</textarea> <script> alerta (\' hello world \ '); </script> <textarea>'; />. Portanto, seu código é vulnerável ao xss.
Gary Drocella

O PHP é do lado do servidor, portanto, não altera o resultado visto pelo navegador. Especialmente não ignora o intérprete HTML.
Robert Siemer

Gosto da formatação da área de texto para que não pareça uma caixa de entrada. Também adiciono largura 100% para reduzir a embalagem:<textarea disabled="true" style="border: none;background-color:white; width:100%">
Dan King

@GaryDrocella, se você inserir tags <script> na lista, elas serão convertidas em & lt; e & gt; automaticamente, para que nenhum script seja executado
bluejayke 23/01

6

Em HTML? Não.

Em XML / XHTML? Você poderia usar um CDATAbloco.


6

É muito simples .... Use este código xmp

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>

6

Eu assumo:

  • você deseja escrever HTML5 100% válido
  • você deseja colocar o trecho de código (quase) literal no HTML
    • especialmente <não deve precisar escapar

Todas as suas opções estão nesta árvore:

  • com sintaxe HTML
    • existem cinco tipos de elementos
    • aqueles chamados "elementos normais" (como <p>)
      • não pode ter um literal <
      • seria considerado o início da próxima tag ou comentário
    • elementos nulos
      • eles não têm conteúdo
      • você pode colocar seu HTML em um atributo de dados (mas isso é verdade para todos os elementos)
      • que precisariam de JavaScript para mover os dados para outro lugar
      • em atributos de aspas duplas "e &thing;precisam ser escapados: &quot;e &amp;thing;respectivamente
    • elementos de texto bruto
      • <script>e <style>apenas
      • eles nunca são tornados visíveis
      • mas a incorporação de seu texto em Javascript pode ser viável
      • Javascript permite seqüências de várias linhas com reticulares
      • poderia então ser inserido dinamicamente
      • um literal </scriptnão é permitido em nenhum lugar<script>
    • elementos de texto bruto escapáveis
      • <textarea>e <title>apenas
      • <textarea> é um bom candidato para quebrar o código
      • é totalmente legal escrever </html>
      • ilegal é a substring </textareapor razões óbvias
        • escapar deste caso especial com &lt;/textareaou similar
      • &thing; precisa escapar: &amp;thing;
    • elementos estrangeiros
      • elementos dos namespaces MathML e SVG
      • pelo menos SVG permite incorporar HTML novamente ...
      • e CDATA é permitido lá, então parece ter potencial
  • com sintaxe XML

 

Nota: >nunca precisa escapar. Nem mesmo em elementos normais.


1
Eu gosto da abordagem abrangente da sua resposta. Algumas correções: <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.
Sam Watkins

Interessante. @SamWatkins <xmp>não é HTML5 válido, mas seu outro truque parece adequado!
Robert Siemer

5

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 &nbsp;são removidas inteiramente em uma área de texto)


Essa é uma abordagem bastante interessante, usar JavaScript e a API do DOM para fazer a fuga para nós. Poderíamos usá-lo junto com um <template>ou algo que normalmente não é renderizado.
Sam Watkins

3

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


3
<textarea ><?php echo htmlentities($page_html); ?></textarea>

funciona bem para mim ..

"tendo em mente a Alexander'ssugestão, eis por que acho que essa é uma boa abordagem"

se tentarmos simplificar <textarea>, talvez nem sempre funcione, pois pode haver textareatags 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 htmlentitiesconverte 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 :)


2
Embora esse código possa responder à pergunta, fornecer um contexto adicional sobre como e por que resolve o problema melhoraria o valor a longo prazo da resposta.
Alexander

1
Se você estiver usando htmlentities () assim, <textarea> se tornará redundante. Basta colocá-lo em uma div ou algo assim. O OP não sugeriu que eles estivessem usando o PHP.
Nick Rice

@ Nick sim bem, na minha opinião textarea serve como um recipiente natural como ele irá adicionar automaticamente as barras de rolagem e outras coisas que de outra forma precisa styling se nós colocá-lo em div de algo ..
Anupam

2

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 $strhtmlencoded:

<div style="white-space: pre">
  <?php echo htmlentities($str); ?>
</div>

2

Este é um truque simples e eu tentei no Safari e Firefox

<code>
    <span><</span>meta property="og:title" content="A very fine cuisine" /><br>
    <span><</span>meta property="og:image" content="http://www.example.com/image.png" />
</code>

Mostrará assim:

insira a descrição da imagem aqui

Você pode vê-lo ao vivo aqui


2

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 LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJocorda 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, "");

1

Existem algumas maneiras de escapar de tudo em HTML, nenhuma delas agradável.

Ou você pode colocar um iframeque carrega um arquivo de texto antigo simples.


1

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.


1

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>";

esse código é vulnerável ao xss. qualquer um pode definir $ str = "</textarea> <textarea>"
Gary Drocella

Oi, isso pode muito bem resolver o problema ... mas seria bom se você pudesse fornecer uma pequena explicação sobre como e por que funciona :) Não se esqueça - existem muitos novatos no Stack overflow e eles podem aprender uma coisa ou duas da sua experiência - o que é óbvio para você pode não ser o mesmo para eles.
Taryn East

1
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


1

Você poderia tentar:

Hello! Here is some code:

<xmp>
<div id="hello">

</div>
</xmp>


0

Pode não funcionar em todas as situações, mas colocar trechos de código dentro de a textareaexibirá-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.


0

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? .


-1
 //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)

-2

Uma combinação de algumas respostas que funcionam juntas aqui:

function c(s) {
    return s.split("&lt;").join("<").split("&gt;").join(">").split("&amp;").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>

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.