I'd like to display code on a web page. However I'd like it to keep its spacing and be color coded by syntax.
Please do not respond with:
- Replacing the < > & " with entities such as
<This is not what I need: doing this removes all my line breaks and my spacing and provides no color <pre> <code>This totally fails it still tries to execute the HTML and PHP
See if I copy and paste code into here. It gives me exactly what I want on my site nicely color coded and with the white space maintained.
<span style="color:#FE7A15;font-size:140%">■</span> <a href=";>stackoverflow</a>
<span style="color:#FE7A15;font-size:140%">■</span> <a href=";>api/apps</a>
<span style="color:#FE7A15;font-size:140%">■</span> <a href=";>careers</a>
<span style="color:#E8272C;font-size:140%">■</span> <a href=";>serverfault</a>
<span style="color:#00AFEF;font-size:140%">■</span> <a href=";>superuser</a>
<span style="color:#969696;font-size:140%">■</span> <a href=";>meta</a>
<span style="color:#46937D;font-size:140%">■</span> <a href=";>area 51</a>
<span style="color:#C0D0DC;font-size:140%">■</span> <a href=";>webapps</a>
<span style="color:#000000;font-size:140%">■</span> <a href=";>gaming</a>
<span style="color:#dd4814;font-size:140%">■</span> <a href=";>ubuntu</a>
<span style="color:#9ce4fe;font-size:140%">■</span> <a href=";>webmasters</a>
<span style="color:#cf4d3f;font-size:140%">■</span> <a href=";>cooking</a>
<span style="color:#f4f28d;font-size:140%">■</span> <a href=";>game development</a>
<span style="color:#0f3559;font-size:140%">■</span> <a href=";>math</a>
<span style="color:#f2f2f2;font-size:140%">■</span> <a href=";>photography</a>
<span style="color:#037187;font-size:140%">■</span> <a href=";>stats</a>
<span style="color:#f1e7cc;font-size:140%">■</span> <a href=";>tex</a>
<span style="color:#e1cdae;font-size:140%">■</span> <a href=";>english</a>
<span style="color:#a2d9f6;font-size:140%">■</span> <a href=";>theoretical cs</a>
<span style="color:#1b3e6c;font-size:140%">■</span> <a href=";>programmers</a>
<span style="color:#293a5d;font-size:140%">■</span> <a href=";>unix</a>
<span style="color:#bec0cb;font-size:140%">■</span> <a href=";>apple</a>
<span style="color:#939185;font-size:140%">■</span> <a href=";>wordpress</a>
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 TextWrangler (the text editor) does. Often this will be the code of the whole page from doc type to html.
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.
I need this to work for PHP HTML at a minimum and preferably CSS, JavaScript, and jQuery as well.
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.
I'd like to display code on a web page. However I'd like it to keep its spacing and be color coded by syntax.
Please do not respond with:
- Replacing the < > & " with entities such as
<This is not what I need: doing this removes all my line breaks and my spacing and provides no color <pre> <code>This totally fails it still tries to execute the HTML and PHP
See if I copy and paste code into here. It gives me exactly what I want on my site nicely color coded and with the white space maintained.
<span style="color:#FE7A15;font-size:140%">■</span> <a href="http://stackoverflow.com">stackoverflow.com</a>
<span style="color:#FE7A15;font-size:140%">■</span> <a href="http://stackapps.com">api/apps</a>
<span style="color:#FE7A15;font-size:140%">■</span> <a href="http://careers.stackoverflow.com">careers</a>
<span style="color:#E8272C;font-size:140%">■</span> <a href="http://serverfault.com">serverfault.com</a>
<span style="color:#00AFEF;font-size:140%">■</span> <a href="http://superuser.com">superuser.com</a>
<span style="color:#969696;font-size:140%">■</span> <a href="http://meta.stackoverflow.com">meta</a>
<span style="color:#46937D;font-size:140%">■</span> <a href="http://area51.stackexchange.com">area 51</a>
<span style="color:#C0D0DC;font-size:140%">■</span> <a href="http://webapps.stackexchange.com">webapps</a>
<span style="color:#000000;font-size:140%">■</span> <a href="http://gaming.stackexchange.com">gaming</a>
<span style="color:#dd4814;font-size:140%">■</span> <a href="http://askubuntu.com">ubuntu</a>
<span style="color:#9ce4fe;font-size:140%">■</span> <a href="http://webmasters.stackexchange.com">webmasters</a>
<span style="color:#cf4d3f;font-size:140%">■</span> <a href="http://cooking.stackexchange.com">cooking</a>
<span style="color:#f4f28d;font-size:140%">■</span> <a href="http://gamedev.stackexchange.com">game development</a>
<span style="color:#0f3559;font-size:140%">■</span> <a href="http://math.stackexchange.com">math</a>
<span style="color:#f2f2f2;font-size:140%">■</span> <a href="http://photo.stackexchange.com">photography</a>
<span style="color:#037187;font-size:140%">■</span> <a href="http://stats.stackexchange.com">stats</a>
<span style="color:#f1e7cc;font-size:140%">■</span> <a href="http://tex.stackexchange.com">tex</a>
<span style="color:#e1cdae;font-size:140%">■</span> <a href="http://english.stackexchange.com">english</a>
<span style="color:#a2d9f6;font-size:140%">■</span> <a href="http://cstheory.stackexchange.com">theoretical cs</a>
<span style="color:#1b3e6c;font-size:140%">■</span> <a href="http://programmers.stackexchange.com">programmers</a>
<span style="color:#293a5d;font-size:140%">■</span> <a href="http://unix.stackexchange.com">unix</a>
<span style="color:#bec0cb;font-size:140%">■</span> <a href="http://apple.stackexchange.com">apple</a>
<span style="color:#939185;font-size:140%">■</span> <a href="http://wordpress.stackexchange.com">wordpress</a>
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 TextWrangler (the text editor) does. Often this will be the code of the whole page from doc type to html.
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.
I need this to work for PHP HTML at a minimum and preferably CSS, JavaScript, and jQuery as well.
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.
Share Improve this question edited Nov 13, 2020 at 17:48 Peter Mortensen 31.6k22 gold badges109 silver badges133 bronze badges asked Feb 17, 2011 at 12:11 tessatessa 1111 gold badge1 silver badge4 bronze badges 1- 1 Have you tried Firebugging the highlighted code in your question? – kapa Commented Feb 17, 2011 at 12:26
4 Answers
Reset to default 9I use the syntax highlighter from Alex Gorbatchev (JavaScript).
See http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html for instructions. But if you need to support displaying HTML containing script elements, you'll need to fall back to the <pre> method, and thus escape <, > and &.
This is what you need to do:
- Replace
< > & "with entities such as<You do this, then do #2 to preserve spacing. You cannot avoid escaping entities since those characters can cause invalid HTML which causes parsing errors in the browser. - Use
<pre><code>to preserve spacing. After you escaped those special characters, and will not cause the escaped HTML and PHP to get executed (unless you explicitly told PHP and HTML to execute them).
Syntax coloring is a bit more difficult, since you will need a parser that understands the language you're trying to show; even Stack Overflow's syntax coloring does not always work as well as it could.
Look at PHP's built-in highlight_string() and highlight_file() functions.
You can use SyntaxHighlighter.
Download SyntaxHighlighter.
The SyntaxHighlighter plugin is also available for WordPress users.
For details, read this post.