Exibir trechos de HTML em HTML

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

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

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

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.

¹ Caso em questão:

textarea {border: none; width: 100%;}

<textarea readonly="readonly">
  <p>Computer <textarea>says</textarea> <span>no.</span>
</textarea>

<xmp>
  Computer <xmp>says</xmp> <span>no.</span>
</xmp>

O método experimentado e verdadeiro para HTML:

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

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?

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.

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>

eu usei <xmp>assim: http://jsfiddle.net/barnameha/hF985/1/

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.

Em HTML? Não.

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

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

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>

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: "e &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>lá
    • ilegal é a substring </textareapor razões óbvias
      • escapar deste caso especial com </textareaou similar
    • &thing; precisa escapar: &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
  • coberto pela resposta de Konrad

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

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)

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'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 :)

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>

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:

Você pode vê-lo ao vivo aqui

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

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.

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

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("&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>