title: Display code (HTML, CSS, PHP, JavaScript, jQuery, etc.) on a webpage, just like code is displayed here, in a box, syntax-highlighted
body: <p>I'd like to display code on a web page. However I'd like it to keep its spacing <em>and</em> be color coded by syntax.</p>
  <p><strong>Please do not respond with:</strong></p>
  <ol>
  <li>Replacing the &lt; &gt; &amp; &quot; with entities such as <code>&amp;lt;</code> This is not what I need: doing this removes all my line breaks and my spacing and provides no color</li>
  <li><code>&lt;pre&gt; &lt;code&gt;</code> This totally fails it still tries to execute the HTML and PHP</li>
  </ol>
  <p>See if I copy and paste code into here. It gives me <em>exactly</em> what I want on my site nicely color coded and with the white space maintained.</p>
  <pre><code>                    &lt;span style=&quot;color:#FE7A15;font-size:140%&quot;&gt;&amp;#9632;&lt;/span&gt;&amp;nbsp;&lt;a href=&quot;http://stackoverflow.com&quot;&gt;stackoverflow.com&lt;/a&gt;&amp;nbsp;
                      &lt;span style=&quot;color:#FE7A15;font-size:140%&quot;&gt;&amp;#9632;&lt;/span&gt;&amp;nbsp;&lt;a href=&quot;http://stackapps.com&quot;&gt;api/apps&lt;/a&gt;&amp;nbsp;
                      &lt;span style=&quot;color:#FE7A15;font-size:140%&quot;&gt;&amp;#9632;&lt;/span&gt;&amp;nbsp;&lt;a href=&quot;http://careers.stackoverflow.com&quot;&gt;careers&lt;/a&gt;&amp;nbsp;
                      &lt;span style=&quot;color:#E8272C;font-size:140%&quot;&gt;&amp;#9632;&lt;/span&gt;&amp;nbsp;&lt;a href=&quot;http://serverfault.com&quot;&gt;serverfault.com&lt;/a&gt;&amp;nbsp;
                      &lt;span style=&quot;color:#00AFEF;font-size:140%&quot;&gt;&amp;#9632;&lt;/span&gt;&amp;nbsp;&lt;a href=&quot;http://superuser.com&quot;&gt;superuser.com&lt;/a&gt;&amp;nbsp;
                      &lt;span style=&quot;color:#969696;font-size:140%&quot;&gt;&amp;#9632;&lt;/span&gt;&amp;nbsp;&lt;a href=&quot;http://meta.stackoverflow.com&quot;&gt;meta&lt;/a&gt;&amp;nbsp;
                      &lt;span style=&quot;color:#46937D;font-size:140%&quot;&gt;&amp;#9632;&lt;/span&gt;&amp;nbsp;&lt;a href=&quot;http://area51.stackexchange.com&quot;&gt;area&amp;nbsp;51&lt;/a&gt;&amp;nbsp;
                      &lt;span style=&quot;color:#C0D0DC;font-size:140%&quot;&gt;&amp;#9632;&lt;/span&gt;&amp;nbsp;&lt;a href=&quot;http://webapps.stackexchange.com&quot;&gt;webapps&lt;/a&gt;&amp;nbsp;
                      &lt;span style=&quot;color:#000000;font-size:140%&quot;&gt;&amp;#9632;&lt;/span&gt;&amp;nbsp;&lt;a href=&quot;http://gaming.stackexchange.com&quot;&gt;gaming&lt;/a&gt;&amp;nbsp;
                      &lt;span style=&quot;color:#dd4814;font-size:140%&quot;&gt;&amp;#9632;&lt;/span&gt;&amp;nbsp;&lt;a href=&quot;http://askubuntu.com&quot;&gt;ubuntu&lt;/a&gt;&amp;nbsp;
                      &lt;span style=&quot;color:#9ce4fe;font-size:140%&quot;&gt;&amp;#9632;&lt;/span&gt;&amp;nbsp;&lt;a href=&quot;http://webmasters.stackexchange.com&quot;&gt;webmasters&lt;/a&gt;&amp;nbsp;
                      &lt;span style=&quot;color:#cf4d3f;font-size:140%&quot;&gt;&amp;#9632;&lt;/span&gt;&amp;nbsp;&lt;a href=&quot;http://cooking.stackexchange.com&quot;&gt;cooking&lt;/a&gt;&amp;nbsp;
                      &lt;span style=&quot;color:#f4f28d;font-size:140%&quot;&gt;&amp;#9632;&lt;/span&gt;&amp;nbsp;&lt;a href=&quot;http://gamedev.stackexchange.com&quot;&gt;game development&lt;/a&gt;&amp;nbsp;
                      &lt;span style=&quot;color:#0f3559;font-size:140%&quot;&gt;&amp;#9632;&lt;/span&gt;&amp;nbsp;&lt;a href=&quot;http://math.stackexchange.com&quot;&gt;math&lt;/a&gt;&amp;nbsp;
                      &lt;span style=&quot;color:#f2f2f2;font-size:140%&quot;&gt;&amp;#9632;&lt;/span&gt;&amp;nbsp;&lt;a href=&quot;http://photo.stackexchange.com&quot;&gt;photography&lt;/a&gt;&amp;nbsp;
                      &lt;span style=&quot;color:#037187;font-size:140%&quot;&gt;&amp;#9632;&lt;/span&gt;&amp;nbsp;&lt;a href=&quot;http://stats.stackexchange.com&quot;&gt;stats&lt;/a&gt;&amp;nbsp;
                      &lt;span style=&quot;color:#f1e7cc;font-size:140%&quot;&gt;&amp;#9632;&lt;/span&gt;&amp;nbsp;&lt;a href=&quot;http://tex.stackexchange.com&quot;&gt;tex&lt;/a&gt;&amp;nbsp;
                      &lt;span style=&quot;color:#e1cdae;font-size:140%&quot;&gt;&amp;#9632;&lt;/span&gt;&amp;nbsp;&lt;a href=&quot;http://english.stackexchange.com&quot;&gt;english&lt;/a&gt;&amp;nbsp;
                      &lt;span style=&quot;color:#a2d9f6;font-size:140%&quot;&gt;&amp;#9632;&lt;/span&gt;&amp;nbsp;&lt;a href=&quot;http://cstheory.stackexchange.com&quot;&gt;theoretical cs&lt;/a&gt;&amp;nbsp;
                      &lt;span style=&quot;color:#1b3e6c;font-size:140%&quot;&gt;&amp;#9632;&lt;/span&gt;&amp;nbsp;&lt;a href=&quot;http://programmers.stackexchange.com&quot;&gt;programmers&lt;/a&gt;&amp;nbsp;
                      &lt;span style=&quot;color:#293a5d;font-size:140%&quot;&gt;&amp;#9632;&lt;/span&gt;&amp;nbsp;&lt;a href=&quot;http://unix.stackexchange.com&quot;&gt;unix&lt;/a&gt;&amp;nbsp;
  
                      &lt;span style=&quot;color:#bec0cb;font-size:140%&quot;&gt;&amp;#9632;&lt;/span&gt;&amp;nbsp;&lt;a href=&quot;http://apple.stackexchange.com&quot;&gt;apple&lt;/a&gt;&amp;nbsp;
                      &lt;span style=&quot;color:#939185;font-size:140%&quot;&gt;&amp;#9632;&lt;/span&gt;&amp;nbsp;&lt;a href=&quot;http://wordpress.stackexchange.com&quot;&gt;wordpress&lt;/a&gt;
  </code></pre>
  <p>I'm looking for a way to display code (without it executing) and have the color coded syntax just like this website does, or like <a href="https://en.wikipedia.org/wiki/BBEdit#TextWrangler" rel="nofollow noreferrer">TextWrangler</a> (the text editor) does. Often this will be the code of the whole page from doc type to <code>html</code>.</p>
  <p>I've seen color coded display of code on many developer websites, so I know it's doable, but any Google Search ends up bringing me to the billion pages on how to change font color and such in HTML.</p>
  <p>I need this to work for PHP HTML at a <em>minimum</em> and preferably CSS, JavaScript, and jQuery as well.</p>
  <p>PS: the color coded syntax is not necessary, but keeping my format (line breaks spacing white space, etc.) is absolutely necessary and with the amount of code it posts, it is not feasible to do so manually.</p>