Mostrar fragmentos de HTML en HTML

¿Cómo puedo mostrar fragmentos de HTML en una página web sin necesidad de reemplazar cada uno <con <y >con> ?

En otras palabras, ¿hay una etiqueta para no renderizar HTML hasta que presione la etiqueta de cierre ?

No , no hay En HTML propiamente dicho, no hay forma de escapar de algunos caracteres:

• & como &
• < como <

(Por cierto, no hay necesidad de escapar, >pero las personas a menudo lo hacen por razones de simetría).

Y, por supuesto, debe rodear el código HTML resultante escapado <pre><code>…</code></pre>para (a) preservar los espacios en blanco y los saltos de línea, y (b) marcarlo como un elemento de código.

Todas las demás soluciones, como envolver su código en un elemento <textarea>o (en desuso) <xmp>, se romperán . ¹

XHTML que se declara al navegador como XML (a través del Content-Typeencabezado HTTP ; simplemente establecer un noDOCTYPE es suficiente ) alternativamente podría usar una sección CDATA:

<![CDATA[Your <code> here]]>

Pero esto solo funciona en XML, no en HTML, e incluso esta no es una solución infalible, ya que el código no debe contener el delimitador de cierre ]]>. Entonces, incluso en XML, la solución más simple y robusta es a través del escape.

¹ Caso en cuestión:

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>

El método probado y verdadero para HTML:

1. Reemplace el &personaje con&
2. Reemplace el <personaje con<
3. Reemplace el >personaje con>
4. Opcionalmente, rodee su muestra HTML con <pre>y / o <code>etiquetas.

mejor manera:

<xmp>
// your codes ..
</xmp>

muestras antiguas:

muestra 1 :

<pre>
  This text has
  been formatted using
  the HTML pre tag. The brower should
  display all white space
  as it was entered.
</pre>

muestra 2 :

<pre>
  <code>
    My pre-formatted code
    here.
  </code>
</pre>

muestra 3 : (Si en realidad está "citando" un bloque de código, entonces el marcado sería)

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

buena muestra 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 resaltado de sintaxis (para trabajo profesional):

arcoiris (muy perfecto)

embellecer

sintaxis

realce

JS Highlighter

mejores enlaces para ti:

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/

¿Cómo resaltar el código fuente en HTML?

Un tipo de método ingenuo para mostrar el código lo incluirá en un área de texto y agregará un atributo deshabilitado para que no sea editable.

<textarea disabled> code </textarea>

Espero que ayude a alguien que busca una manera fácil de hacer las cosas.

En desuso , pero funciona en FF3 e IE8.

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

Recomendado:

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

Utilicé <xmp>así: http://jsfiddle.net/barnameha/hF985/1/

El desaprobado <xmp> etiqueta en esencialmente hace eso, pero ya no es parte de la especificación XHTML. Sin embargo, debería funcionar en todos los navegadores actuales.

Aquí hay otra idea, un truco de hack / salón, podría poner el código en un área de texto de esta manera:

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

Poner corchetes angulares y código como este dentro de un área de texto es HTML no válido y causará un comportamiento indefinido en diferentes navegadores. En Internet Explorer, se interpreta el HTML, mientras que Mozilla, Chrome y Safari lo dejan sin interpretar.

Si quieres que no sea editable y se vea diferente, entonces puedes diseñarlo fácilmente usando CSS. El único problema sería que los navegadores agregarán ese pequeño controlador de arrastre en la esquina inferior derecha para cambiar el tamaño del cuadro. O bien, intente usar una etiqueta de entrada en su lugar.

La forma correcta de inyectar código en su área de texto es usar un lenguaje del lado del servidor como este PHP, por ejemplo:

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

Luego omite el intérprete html y coloca el texto no interpretado en el área de texto de manera consistente en todos los navegadores.

Aparte de eso, la única forma es realmente escapar del código usted mismo si está usando HTML estático o usando métodos del lado del servidor como .NET's HtmlEncode () si usa dicha tecnología.

En HTML? No.

En XML / XHTML? Podrías usar un CDATAbloque.

Es muy simple ... Use este código xmp

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>

Asumo:

• quieres escribir HTML5 100% válido
• desea colocar el fragmento de código (casi) literal en el HTML
  • especialmente <no debería necesitar escapar

Todas tus opciones están en este árbol:

• con sintaxis HTML
  • hay cinco tipos de elementos
  • los llamados "elementos normales" (como <p> )
    • no puede tener un literal <
    • se consideraría el comienzo de la siguiente etiqueta o comentario
  • elementos vacíos
    • no tienen contenido
    • podría poner su HTML en un atributo de datos (pero esto es cierto para todos los elementos)
    • eso necesitaría JavaScript para mover los datos a otra parte
    • en atributos con comillas dobles, "y &thing;necesitan escapar: "y &thing;respectivamente
  • elementos de texto sin procesar
    • <script>y <style>solo
    • nunca se hacen visibles
    • pero incrustar su texto en Javascript podría ser factible
    • Javascript permite cadenas de varias líneas con backticks
    • entonces podría insertarse dinámicamente
    • un literal </scriptno está permitido en ningún lugar de<script>
  • elementos de texto sin formato escapables
    • <textarea>y <title>solo
    • <textarea> es un buen candidato para envolver código
    • es totalmente legal escribir </html>allí
    • no es legal la subcadena </textarea por razones obvias
      • escapar de este caso especial con </textareao similar
    • &thing; necesita escapar: &thing;
  • elementos extraños
    • elementos de espacios de nombres MathML y ​​SVG
    • al menos SVG permite incrustar HTML nuevamente ...
    • y CDATA está permitido allí, por lo que parece tener potencial
• con sintaxis XML
  • cubierto por la respuesta de Konrad

Nota: >nunca necesita escapar. Ni siquiera en elementos normales.

Si su objetivo es mostrar un fragmento de código que está ejecutando en otra parte de la misma página, puede usar textContent (es pure-js y está bien soportado: 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 obtener el formato de varias líneas en el resultado, debe establecer el estilo css "white-space: pre;" en el div de destino y escriba las líneas individualmente con "\ r \ n" al final de cada una.

Aquí hay una demostración: https://jsfiddle.net/wphps3od/

Este método tiene una ventaja sobre el uso de textarea: el código no se formateará como lo haría en un textarea. (Cosas como  se eliminan por completo en un área de texto)

En definitiva, la mejor respuesta (aunque molesta) es "escapar del texto".

Sin embargo, hay muchos editores de texto, o incluso mini utilidades independientes, que pueden hacer esto automáticamente. Por lo tanto, nunca debería tener que escapar manualmente si no lo desea (a menos que sea una combinación de código escapado y no escapado ...)

La búsqueda rápida en Google me muestra este, por ejemplo: http://malektips.com/zzee-text-utility-html-escape-regular-expression.html

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

funciona bien para mi ..

"teniendo en cuenta la Alexander'ssugerencia, aquí es por qué creo que este es un buen enfoque"

Si lo intentamos de manera simple <textarea>, puede que no siempre funcione, ya que puede haber textareaetiquetas de cierre que pueden cerrar incorrectamente la etiqueta principal y mostrar el resto de la fuente HTML en el documento principal, lo que sería incómodo.

el uso htmlentitiesconvierte todos los caracteres aplicables, como < >entidades HTML, lo que elimina cualquier posibilidad de fugas.

Puede haber beneficios o deficiencias en este enfoque o una mejor manera de lograr los mismos resultados, si es así, comente ya que me encantaría aprender de ellos :)

Puede usar un lenguaje del lado del servidor como PHP para insertar texto sin formato:

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

luego $strdescargue el valor de htmlencoded:

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

Este es un truco simple y lo he probado en Safari y 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>

Se mostrará así:

Puedes verlo en vivo aquí

En realidad no es una manera de hacer esto. Tiene limitación (una), pero es 100% estándar, no está en desuso (como xmp), y funciona.

Y es trivial. Aquí 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 déjame explicarte. En primer lugar, el comentario HTML normal hace el trabajo, para evitar que se interprete todo el bloque. Puede agregar fácilmente cualquier etiqueta, todas serán ignoradas. Ignorado por la interpretación, pero aún disponible a través deinnerHTML ! Entonces, lo que queda es obtener el contenido y filtrar los tokens de comentarios anteriores y finales.

Excepto (recuerde, la limitación) no puede poner comentarios HTML dentro, ya que (al menos en mi Chrome) no se admite el anidamiento de ellos, y primero '->' finalizará el programa.

Bueno, es una pequeña limitación desagradable, pero en ciertos casos no es un problema en absoluto, si su texto está libre de comentarios HTML. Y, es más fácil escapar de una construcción, luego un montón de ellas.

Ahora, ¿qué es esa LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJocuerda extraña ? Es una cadena aleatoria, como un hash, que es poco probable que se use en el bloque, ¿y para qué? Aquí está el contexto, por qué lo he usado. En mi caso, tomé el contenido de un DIV, luego lo procesé con Showdown Markdown y luego la salida asignada a otro div. La idea era escribir un descuento en línea en el archivo HTML, y simplemente abrirlo en un navegador y se transformaría sobre la marcha sobre la marcha. Entonces, en mi caso, <!--se transformó en <p><!--</p>, el comentario escapó correctamente. Funcionó, pero contaminó la pantalla. Entonces, para eliminarlo fácilmente con regex, se usó la cadena aleatoria. Aquí está el 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 = '';

Y funciona.

Si alguien está interesado, este artículo está escrito usando esta técnica. Siéntase libre de descargar y mire dentro del archivo HTML.

Depende de para qué lo estés usando. ¿Es entrada del usuario? Luego usa <textarea>y escapa de todo. En mi caso, y probablemente también sea tu caso, simplemente usé comentarios y hace el trabajo.

Si no usa Markdown, y solo quiere obtenerlo como es de una etiqueta, entonces es aún más simple:

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

y código JavaScript para obtenerlo:

    var src = document.getElementById("mydoc-src");
    var YOUR_CODE = src.innerHTML.replace(/(<!--|-->)/g, "");

Hay algunas formas de escapar de todo en HTML, ninguna de ellas agradable.

O podría poner un iframearchivo que cargue un archivo de texto simple y antiguo.

Este es, con mucho, el mejor método para la mayoría de las situaciones:

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

Hubiera votado a la primera persona que lo sugirió, pero no tengo reputación. Sin embargo, me sentí obligado a decir algo por el bien de las personas que intentan encontrar respuestas en Internet.

Así es como lo hice:

$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

devolverá el HTML escapado

Tu podrías intentar:

Hello! Here is some code:

<xmp>
<div id="hello">

</div>
</xmp>

Es posible que no funcione en todas las situaciones, pero colocar fragmentos de código dentro de un textarealos mostrará como código.

Puede diseñar el área de texto con CSS si no desea que se vea como un área de texto real.

Es un truco, pero 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>

Con ese CSS, el navegador mostrará scripts dentro del cuerpo. No intentará ejecutar este script, ya que tiene un tipo desconocido text/html. No es necesario escapar de caracteres especiales dentro de un <script>, a menos que desee incluir un cierre</script> etiqueta de .

Estoy usando algo como esto para mostrar JavaScript ejecutable en el cuerpo de la página, para una especie de "programación alfabetizada".

Hay más información en esta pregunta ¿ Cuándo deberían estar visibles las etiquetas y por qué pueden hacerlo? .

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

Una combinación de un par de respuestas que funcionan juntas aquí:

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>