Mostrar o código HTML no HTML

O método tentado e verdadeiro para HTML:

1. substituir o carácter & por &
2. substituir o carácter < por <
3. substituir o carácter > por >
Opcionalmente rodeie a sua amostra de HTML com <pre> e/ou <code> etiquetas.

A 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, então a marcação seria)

<blockquote>
  <pre>
    <code>
        My pre-formatted "quoted" code here.
    </code>
  </pre>
</blockquote>

Boa amostra 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 realce de sintaxe (para trabalho pro):

Arco-íris (muito Perfeito)

Pretify

Syntaxhighlighter

Realçar

JSHighlighter

Melhores ligações para tu.:

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 realçar o código-fonte em HTML?

O tipo de método ingênuo para mostrar o código será incluí-lo em um textarea e adicionar atributo desativado para que não seja editável.

<textarea disabled> code </textarea>

Obsoleto , mas funciona em FF3 e IE8.

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

Recomendado:

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

Eu usei {[[0]} assim mesmo : http://jsfiddle.net/barnameha/hF985/1/

Em HTML? Não.

Em XML/XHTML? Dava-te jeito um bloco.

A marca obsoleta {[[2]} faz essencialmente isso, mas já não faz parte do espectrómetro de XHTML. Ainda deve funcionar em todos os navegadores atuais.

<textarea disabled="true" style="border: none;background-color:white;">
    <p>test</p>
</textarea>

Colocar parêntesis de ângulo e código como este dentro de uma área de texto é HTML inválido e irá causar um comportamento indefinido em diferentes navegadores. No Internet Explorer o HTML é interpretado, enquanto Mozilla, Chrome e Safari o deixam desinterpretado.

Se quiser que não seja editável e que tenha um aspecto diferente, pode facilmente estilá-lo usando o CSS. A única questão seria que os navegadores irão adicionar essa pequena pega de arrasto no canto inferior direito para redimensionar a caixa. Ou alternativamente, tente usar uma tag de entrada em vez disso.

A forma correcta de injectar o código no seu textarea é usar a 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>

Além disso, a única maneira é realmente escapar do código você mesmo se HTML estático ou usando métodos do lado do servidor, como o HtmlEncode() do.NET se usar tal tecnologia.

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>

Seguir a ligação será útil.

Http://www.freebits.co.uk/convert-html-code-to-text.html

Em última análise, a melhor resposta (embora irritante) é "escapar do texto".

Uma pesquisa rápida no Google mostra-me esta, por exemplo: http://malektips.com/zzee-text-utility-html-escape-regular-expression.html

Assumo:

• quer escrever HTML5 100% válido
• Você quer colocar o excerto de código (quase) literal no HTML
  • especialmente < não deve ser necessário escapar

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

• com sintaxe HTML
  Há cinco tipos de elementos.
  • aqueles chamados " elementos normais "(como <p>)
    Não posso ter um literal.
  • seria considerado o início da próxima etiqueta ou comentário
• elementos vazios
  • eles não têm conteúdo
  • Você poderia colocar o seu HTML num atributo de dados (mas isto é verdadeiro para todos os elementos)
  • isso precisaria de JavaScript para mover os dados para outro lugar
  • em atributos duplamente citados, " e &thing; precisam de escapar: " e &thing; respectivamente
• elementos de texto Em Bruto
  • <script> e <style> apenas
  Nunca são renderizados. visível
• mas incorporar o teu texto em Javascript pode ser viável
• o Javascript permite cadeias de caracteres multi-linhas com backticks
• poderia então ser inserido dinamicamente
• um literal </script não é permitido em lado Nenhum em <script>

Pode usar uma linguagem do lado do servidor como o PHP para inserir texto em 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 descarrega o valor de $str htmlencoded:

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

Há algumas maneiras deescapar de tudo {[[4]} em HTML, nenhuma delas é bonita.

Ou pode colocar um {[[0]} que carrega um ficheiro de texto antigo.

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

$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 vai devolver o Html escapado

Se o seu objectivo é mostrar um pedaço de código que está a executar noutro sítio da mesma página, poderá 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 multi-linhas no resultado, você precisa definir o estilo css " white-space: pre;" no div alvo, e escrever as linhas individualmente usando "\r\n" no final de cada.

Este método tem uma vantagem sobre a utilização de textarea: o código não será reformatado como seria em um textarea. (Coisas como   são removidas inteiramente em um textarea)

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

"tendo em mente Alexander's sugestão, eis porque penso que esta é uma boa abordagem"

Se tentarmos simplesmente <textarea> pode nem sempre funcionar, uma vez que pode haver marcas de fecho textarea que podem fechar erradamente a marca-mãe e mostrar o resto da fonte HTML no documento-mãe, o que pareceria estranho.

Usando htmlentities converte todos os caracteres aplicáveis, tais como < > para entidades HTML, o que elimina qualquer possibilidade de fuga.

Talvez haja benefícios ou falhas nesta abordagem ou uma maneira melhor de alcançar os mesmos resultados, se assim for, por favor, comente como eu gostaria de aprender com eles:)

Pode não funcionar em todas as situações, mas colocar excertos de código dentro de um textarea irá mostrá-los como código.

Você pode estilar o textarea com CSS Se você não quiser que ele se pareça com um textarea real.

Podias tentar:

Hello! Here is some code:

<xmp>
<div id="hello">

</div>
</xmp>

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

Ao embrulhar o seu código num contenteditable div e ao definir a indentação white-space: pre-wrap; é preservada, os dados de código de acordo com a largura e a altura são auto-regulados:

<div class="code" contenteditable>
  // code
</div>


.code {
  white-space: pre-wrap;
}