在网页上显示代码（html css php javascript jQuery 等），就像这里显示的代码一样，在一个框中，语法突出显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5028764/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display Code (html css php javascript jQuery etc) on a webpage, just like code is displayed here, in a box, syntax-highlighted
提问by tessa
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
- 将 < > & " 替换为诸如
<This is not what I need: 这样做会删除我所有的换行符和间距，并且不提供任何颜色 <pre> <code>这完全失败了它仍然尝试执行 HTML 和 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>
What I'm looking for is a way to display code (without it executing) and have the color coded syntax just like this website does, or like Text Wrangler (the text editor) does. Often this will be the code of the whole page from doc type to /html.
我正在寻找的是一种显示代码（不执行）并具有颜色编码语法的方法，就像这个网站一样，或者像 Text Wrangler（文本编辑器）那样。通常这将是从 doc 类型到 /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.
我在许多开发人员网站上看到过代码的颜色编码显示，所以我知道它是可行的，但任何谷歌搜索最终都会让我看到十亿页关于如何在 html 中更改字体颜色等的页面。
I need this to work for PHP HTML at MINIMUM and preferably css javascript and jquery as well.
我需要它在 MINIMUM 下为 PHP HTML 工作，最好也为 css javascript 和 jquery 工作。
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 post is not feasible to do do manually
PS：颜色编码的语法不是必需的，但保持我的格式（换行符间距空白等）是绝对必要的，并且它发布的代码量是不可行的
回答by JB Nizet
I use the syntax highlighter from Alex Gorbatchev(JavaScript).
我使用Alex Gorbatchev(JavaScript)的语法高亮器。
See http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.htmlfor 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 &.
有关说明，请参阅http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html。但是，如果您需要支持显示包含脚本元素的 HTML，则需要回退到该<pre>方法，因此转义<,>和&。
回答by Lie Ryan
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).
- 替换
< > & "为诸如<You do this 之类的实体，然后执行 #2 以保留间距。您无法避免转义实体，因为这些字符会导致无效的 HTML，从而导致浏览器中的解析错误。 - 使用
<pre><code>保持间距。转义这些特殊字符后，不会导致执行转义的 HTML 和 PHP（除非您明确告诉 PHP 和 HTML 执行它们）。
Syntax coloring is a bit more difficult, since you will need a parser that understands the language you're trying to show; even SO's syntax coloring does not always work as well as it could
语法着色有点困难，因为您需要一个解析器来理解您试图展示的语言；即使 SO 的语法着色也不总是像它应该的那样工作
回答by samir panchal
回答by TNC
See Mark's reference or Check out this previous post. Works well.
请参阅 Mark 的参考资料或查看之前的帖子。效果很好。
回答by Mark Baker
Have you looked at PHP's built-in highlight_string()and highlight_file()functions?
你看过 PHP 内置的highlight_string()和highlight_file()函数吗？
