Mostrar código (html css php javascript jQuery, etc.) en una página web, al igual que el código se muestra aquí, en un cuadro, sintaxis-resaltada

Question

Me gustaría mostrar el código en una página web; Sin embargo, me gustaría que mantuviera el espaciado Y que esté codificado por color mediante sintaxis.

Por favor, no responder con:

1. Sustitución de la <> & "con entidades tales como < Esto no es lo que necesito: hacer esto elimina todos mis saltos de línea y mi espacio y proporciona ningún color
2. <pre> <code> Esta falla totalmente todavía intenta ejecutar el código HTML y PHP

a ver si puedo copiar y pegar el código aquí, me da EXACTAMENTE lo que quiero en mi sitio bien codificado por colores y con el espacio en blanco mantenido.

    <span style="color:#FE7A15;font-size:140%">&#9632;</span>&nbsp;<a href="http://stackoverflow.com">stackoverflow.com</a>&nbsp; 
        <span style="color:#FE7A15;font-size:140%">&#9632;</span>&nbsp;<a href="http://stackapps.com">api/apps</a>&nbsp; 
        <span style="color:#FE7A15;font-size:140%">&#9632;</span>&nbsp;<a href="http://careers.stackoverflow.com">careers</a>&nbsp; 
        <span style="color:#E8272C;font-size:140%">&#9632;</span>&nbsp;<a href="http://serverfault.com">serverfault.com</a>&nbsp; 
        <span style="color:#00AFEF;font-size:140%">&#9632;</span>&nbsp;<a href="http://superuser.com">superuser.com</a>&nbsp; 
        <span style="color:#969696;font-size:140%">&#9632;</span>&nbsp;<a href="http://meta.stackoverflow.com">meta</a>&nbsp; 
        <span style="color:#46937D;font-size:140%">&#9632;</span>&nbsp;<a href="http://area51.stackexchange.com">area&nbsp;51</a>&nbsp; 
        <span style="color:#C0D0DC;font-size:140%">&#9632;</span>&nbsp;<a href="http://webapps.stackexchange.com">webapps</a>&nbsp; 
        <span style="color:#000000;font-size:140%">&#9632;</span>&nbsp;<a href="http://gaming.stackexchange.com">gaming</a>&nbsp; 
        <span style="color:#dd4814;font-size:140%">&#9632;</span>&nbsp;<a href="http://askubuntu.com">ubuntu</a>&nbsp; 
        <span style="color:#9ce4fe;font-size:140%">&#9632;</span>&nbsp;<a href="http://webmasters.stackexchange.com">webmasters</a>&nbsp; 
        <span style="color:#cf4d3f;font-size:140%">&#9632;</span>&nbsp;<a href="http://cooking.stackexchange.com">cooking</a>&nbsp; 
        <span style="color:#f4f28d;font-size:140%">&#9632;</span>&nbsp;<a href="http://gamedev.stackexchange.com">game development</a>&nbsp; 
        <span style="color:#0f3559;font-size:140%">&#9632;</span>&nbsp;<a href="http://math.stackexchange.com">math</a>&nbsp; 
        <span style="color:#f2f2f2;font-size:140%">&#9632;</span>&nbsp;<a href="http://photo.stackexchange.com">photography</a>&nbsp; 
        <span style="color:#037187;font-size:140%">&#9632;</span>&nbsp;<a href="http://stats.stackexchange.com">stats</a>&nbsp; 
        <span style="color:#f1e7cc;font-size:140%">&#9632;</span>&nbsp;<a href="http://tex.stackexchange.com">tex</a>&nbsp; 
        <span style="color:#e1cdae;font-size:140%">&#9632;</span>&nbsp;<a href="http://english.stackexchange.com">english</a>&nbsp; 
        <span style="color:#a2d9f6;font-size:140%">&#9632;</span>&nbsp;<a href="http://cstheory.stackexchange.com">theoretical cs</a>&nbsp; 
        <span style="color:#1b3e6c;font-size:140%">&#9632;</span>&nbsp;<a href="http://programmers.stackexchange.com">programmers</a>&nbsp; 
        <span style="color:#293a5d;font-size:140%">&#9632;</span>&nbsp;<a href="http://unix.stackexchange.com">unix</a>&nbsp; 

        <span style="color:#bec0cb;font-size:140%">&#9632;</span>&nbsp;<a href="http://apple.stackexchange.com">apple</a>&nbsp; 
        <span style="color:#939185;font-size:140%">&#9632;</span>&nbsp;<a href="http://wordpress.stackexchange.com">wordpress</a> 

Lo que estoy buscando es una manera de mostrar el código (sin que la ejecución) y tienen la sintaxis de un código de colores al igual que este sitio web lo hace, o como texto Wrangler (el editor de texto) lo hace. A menudo, este será el código de toda la página desde el tipo de documento a/html.

He visto la visualización codificada por colores del código en muchos sitios web de desarrolladores, así que sé que es posible, pero cualquier búsqueda en Google me lleva a los mil millones de páginas sobre cómo cambiar el color de fuente y en html.

Necesito que esto funcione para PHP HTML en MÍNIMO y preferiblemente css javascript y jquery también.

PS: la sintaxis de un código de colores no es necesario, pero manteniendo el formato de mi (saltos de línea espaciamiento de los espacios en blanco, etc.) es absolutamente necesario y con la cantidad de código que post no es factible hacerlo hacerlo manualmente

Answer 1

¿Tiene usted miró las funciones integradas de PHP highlight_string() y highlight_file()?

Answer 2

Uso el syntax highlighter from Alex Gorbatchev (JavaScript).

Consulte http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html para obtener instrucciones. Pero si necesita admitir la visualización de elementos de script que contienen HTML, deberá recurrir al método <pre>, y así escapar <, > y &.

Answer 3

Consulte la referencia de Mark o Check out this previous post. Funciona bien.

Answer 4

Esto es lo que hay que hacer:

1. Reemplazar < > & " con entidades como < Para ello, a continuación, hacer # 2 para preservar el espaciado. No puede evitar el escape de entidades ya que esos caracteres pueden causar HTML no válido que causa errores de análisis en el navegador.
2. Use <pre><code> para conservar el espacio. Después de que haya escapado de esos caracteres especiales, y no hará que se ejecuten el código HTML y PHP escapó (a menos que explícitamente le haya dicho a PHP y HTML que los ejecuten).

La coloración de sintaxis es un poco más difícil, ya que necesitará un analizador que entienda el idioma que intenta mostrar; incluso es tan coloreado de sintaxis no siempre funciona tan bien como podría

Answer 5

puede utilizar resaltador de sintaxis

Download SyntaxHighlighter.

El plugin SyntaxHighlighter también está disponible para usuarios de wordpress.

Para más detalles leer this posterior -