Ideas sobre cómo mostrar/presentar etiquetas HTML en una página web

¿Hay alguna manera de escribir HTML en una página web, pero que se muestre como texto?Ideas sobre cómo mostrar/presentar etiquetas HTML en una página web

Déjenme explicar: Quiero construir una página web con una discusión sobre HTML. Por lo tanto, habrá secciones como

<div> 
    <p> 
     <span>Hello world</span> 
    </p> 
</div>

me gustaría que a formateado correctamente con sangría, y tal vez incluso tener las etiquetas en un esquema de color diferente.

Soy plenamente consciente de que podría escribir el estilo yo mismo, pero seguramente alguien ya ha escrito y puesto a disposición una hoja de estilo, una mezcla MENOS, o quizás un plugin jQuery que reconoce y formatea para mí?

ACTUALIZACIÓN: Para que la gente sepa, me doy cuenta de que tengo que codificar HTML las etiquetas (& lt; y & gt;). Pero eso no ayuda con el formato/presentación, y es el formato/presentación con el que estoy buscando ayuda.

Fuente

2011-12-09 awj

> = > <= < o PHP: 'echo htmlspecialchars ('aquí su html');' – Yoshi

y utilizar para el sangrado

– ptriek

Está buscando SintaxisHighlighter. Ver demo page here

Fuente

2011-12-09 09:27:34 robasta

Necesita convertir < y> a HTML entities.

&lt;div&gt; 
    &lt;p&gt; 
     &lt;span&gt;Hello world&lt;/span&gt; 
    &lt;/p&gt; 
&lt;/div&gt;

En cuanto a la codificación de color, mira en Google Code Prettify. Aquí hay algunos examples.

Fuente

2011-12-09 09:25:47 bookcasey

Como anteriores que siempre es una buena idea utilizar los caracteres HTML para mostrar la demostración de HTML para utilizar siempre **<** para < y **>** para < o si quieres ser un poco más útiles para su usuario objetivo, entonces podría utilizar un resaltador de código como Code Highlighter

Espero que esto ayude!

Fuente

2011-12-09 09:28:06

Por lo que respecta a los personajes escapan, lo que necesita para escapar son “<” (como <) y “&” (como &). Si usa herramientas automatizadas, asegúrese de que manejen estos caracteres.

Para conservar el formato (saltos de línea y espaciado), puede utilizar el marcado <pre>. Se utiliza mejor para que la primera línea comience inmediatamente (en la misma línea) después de la etiqueta <pre> y la última línea sea inmediatamente (sin salto de línea) seguido de la etiqueta final </pre>. De lo contrario, algunos navegadores pueden mostrar líneas adicionales vacías.

La marca <pre> implica una fuente monoespacial dependiente del sistema de forma predeterminada. Esto, por supuesto, se puede cambiar en CSS. El marcado también implica la reducción del tamaño de la fuente en la mayoría de los navegadores, presumiblemente para hacer frente a las propiedades de las fuentes monoespaciales; por lo tanto, es posible que desee establecer el tamaño de fuente a un valor (tal vez 100%) para que coincida con su diseño.

Como alternativa, puede ajustar el código dentro de cualquier elemento de bloque (como <div>) y establecer el espacio en blanco: pre para ello en CSS. Esto significa que el formato se conserva pero la fuente y el tamaño de la fuente son los mismos que para el texto circundante (a menos que lo establezca explícitamente).

También puede usar el marcado <code> para indicar el contenido como código de computadora.También configura la fuente en monoespacio y tamaño reducido, pero por lo demás es puramente lógica. Si desea indicar el idioma utilizado, class = language-html sería la forma sugerida en los borradores HTML5. Esto no tiene un impacto directo como tal; simplemente facilita el estilo de las muestras de código HTML consistentemente y las reconoce en el procesamiento de JavaScript si es necesario.

Ejemplo:

<pre><code class=language-html>&lt;div> 
    &lt;p> 
     &lt;span>Hello world&lt;/span> 
    &lt;/p> 
    &lt;/div></code></pre>

Fuente

2011-12-09 11:11:49

utilizar la etiqueta en lugar de <pre><xmp>.

E.g.

<xmp> 

<html> 
<body>This is my html inside html.</body> 
</html> 

</xmp>

Fuente

2013-06-01 02:14:42 fuzzyanalysis

Realmente funcionó para mí .. muchas gracias – Chella

como se ve en las etiquetas son color rojo y texto en negro, ¿cómo hacer eso ...? –

Tenga en cuenta que 'xmp' es obsoleto y se ha eliminado de HTML5: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp –

Ideas sobre cómo mostrar/presentar etiquetas HTML en una página web

Respuesta

Cuestiones relacionadas