Código de visualización (html css php javascript jQuery, etc.) en una página web, al igual que el código se muestra aquí, en un cuadro, con la sintaxis resaltada

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

Por favor no responda con:

Reemplazar el <> & "con entidades como&lt; Esto no es lo que necesito: hacer esto elimina todos mis saltos de línea y mi espacio y no proporciona color<pre> <code> Esto falla totalmente, todavía intenta ejecutar el HTML y PHP

Vea si copio y pego el código aquí, me da EXACTAMENTE lo que quiero en mi sitio con un buen código de 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 forma de mostrar el código (sin que se ejecute) y tener la sintaxis codificada por colores al igual que este sitio web, o como lo hace Text Wrangler (el editor de texto). A menudo, este será el código de toda la página, desde el tipo de documento hasta /html

He visto código de colores en muchos sitios web de desarrolladores, así que sé que es factible, pero cualquier búsqueda en Google termina llevándome a los mil millones de páginas sobre cómo cambiar el color de fuente y tal en html.

Necesito que esto funcione para PHP HTML en MINIMO y preferiblemente también CSS CSS y JQuery.

PS: la sintaxis codificada por colores no es necesaria, pero mantener mi formato (saltos de línea, espacios en blanco, etc.) es absolutamente necesario y con la cantidad de código que publica no es factible hacerlo manualmente

Respuestas a la pregunta(5)

Su respuesta a la pregunta