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="开发者_JS百科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.
I 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.
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论