Código de exibição (html css php javascript jQuery etc) em uma página da web, assim como o código é exibido aqui, em uma caixa, com destaque para sintaxe

Eu gostaria de exibir código em uma página da web; No entanto, eu gostaria que ele mantivesse seu espaçamento E fosse codificado por cores pela sintaxe.

Por favor, não responda com:

Substituindo <> & "por entidades como&lt; Não é disso que preciso: fazer isso remove todas as quebras de linha e espaçamento e não fornece cores<pre> <code> Isso totalmente falha, ainda tenta executar o HTML e PHP

Veja se eu copio e colo o código aqui, isso me dá EXATAMENTE o que eu quero no meu site, com códigos de cores e com o espaço em branco mantido.

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

O que estou procurando é uma maneira de exibir código (sem a execução) e ter a sintaxe codificada por cores, exatamente como este site, ou como o Text Wrangler (o editor de texto). Geralmente, esse será o código da página inteira, do tipo de documento para / html.

Eu já vi exibição de código com código de cores em muitos sites de desenvolvedores, então sei que é possível, mas qualquer pesquisa no Google acaba me levando ao bilhão de páginas sobre como alterar a cor da fonte e outras coisas em html.

Eu preciso disso para trabalhar com PHP HTML no mínimo e, de preferência css javascript e jquery também.

PS: a sintaxe codificada por cores não é necessária, mas manter meu formato (quebras de linha espaçando espaços em branco etc.) é absolutamente necessário e com a quantidade de código que ela postar não é viável fazer manualmente

questionAnswers(5)

yourAnswerToTheQuestion