[英]Display code (HTML, CSS, PHP, JavaScript, jQuery, etc.) on a webpage, just like code is displayed here, in a box, syntax-highlighted
我想在网页上显示代码。 但是我希望它保持其间距并按语法进行颜色编码。
请不要回复：
<实体替换 < > & " 这不是我需要的：这样做会删除我所有的换行符和间距，并且不提供任何颜色<pre> <code>这完全失败了它仍然尝试执行 HTML 和 PHP看看我是否将代码复制并粘贴到此处。 它给了我正是我想要在我的网站很好的颜色编码，并与白的空间保持什么。
<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>
我正在寻找一种显示代码（不执行）的方法，并像本网站一样使用颜色编码语法，或者像TextWrangler （文本编辑器）那样。 通常这将是从 doc 类型到html的整个页面的代码。
我在许多开发者网站上看到过代码的颜色编码显示，所以我知道这是可行的，但是任何 Google 搜索最终都会让我看到十亿页关于如何在 HTML 中更改字体颜色等的页面。
我需要它至少适用于 PHP HTML，最好也适用于 CSS、JavaScript 和 jQuery。
PS：颜色编码的语法不是必需的，但保持我的格式（换行符间距空白等）是绝对必要的，并且随着它发布的代码量，手动这样做是不可行的。
我使用Alex Gorbatchev (JavaScript) 的语法高亮器。
有关说明，请参阅http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html 。 但是，如果您需要支持显示包含脚本元素的 HTML，则需要回退到<pre>方法，从而转义< 、 >和& 。
这是你需要做的：
< > & "替换为<实体，然后执行 #2 以保留间距。您无法避免转义实体，因为这些字符会导致无效的 HTML，从而导致浏览器中的解析错误。<pre><code>保留间距。 转义这些特殊字符后，不会导致执行转义的 HTML 和 PHP（除非您明确告诉 PHP 和 HTML 执行它们）。语法着色有点困难，因为您需要一个解析器来理解您试图展示的语言； 甚至 Stack Overflow 的语法着色也不总是像它应该的那样工作。
看看 PHP 的内置highlight_string()和highlight_file()函数。
请参阅Mark 的参考资料或查看之前的帖子。 它运作良好。
jQuery变量中有趣的html故障，其中包含＆，/等字符？
[英]Interesting html glitch in jquery variable with characters like &, /, etc.?
Javascript、CSS & HTML：如何使用 ZC0BB2196426022E8AEDF9A5B6D34FD4 等交换图像？
[英]Javascript, CSS & HTML: How to swap images using onclick etc.?
JavaScript：我需要对矩阵运算（例如加法，乘法等）提出问题。如何在HTML页面上显示矩阵？
[英]JavaScript: I need to create questions on matrix operations like addition, multiplication, etc. How to display the matrix on the HTML page?
我应该将 CSS 和 Javascript 代码放在 HTML 网页的哪个位置？
[英]Where should I put the CSS and Javascript code in an HTML webpage?
使用类似JQuery的选择器语法以编程方式编辑Less（css）代码？
[英]Programmatically editing Less (css) code with JQuery-like selector syntax?
如何获取网页资源的大小，例如javascript，css，图片等
[英]How to get the Size of a webpage resource like javascript, css, image, etc
如何使用纯 CSS/JavaScript 创建一个 HTML 可水平和垂直折叠的 div，即没有 jQuery，没有 Boostrap 等？
[英]How to create a HTML div collapsible both horizontally and vertically with pure CSS/JavaScript, i.e. no jQuery, no Boostrap etc.?
一种在不使用jquery的情况下使用另一个html中的object标签显示网页的更好方法，仅使用纯JavaScript
[英]A better way to display a webpage using object tag in another html without using jquery, just plain javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.