问题 在网页上显示代码(html css php javascript jQuery等),就像代码显示在这里一样,在框中,语法突出显示


我想在网页上显示代码;但是我希望它保持其间距并通过语法进行颜色编码。

请不要回复: 

  1. 用例如。等实体替换<>&“ &lt; 这不是我需要的:这样做会删除我的所有换行符和间距,并且不提供任何颜色
  2. <pre> <code> 这完全失败了它仍然试图执行HTML和PHP

看看我是否将代码复制并粘贴到此处,它确实给了我在我的网站上想要的内容 很好的颜色编码和保持白色空间。

                    <span style="color:#FE7A15;font-size:140%">&#9632;</span>&nbsp;<a href="http://stackoverflow.com">stackoverflow.com</a>&nbsp; 
                    <span style="color:#FE7A15;font-size:140%">&#9632;</span>&nbsp;<a href="http://stackapps.com">api/apps</a>&nbsp; 
                    <span style="color:#FE7A15;font-size:140%">&#9632;</span>&nbsp;<a href="http://careers.stackoverflow.com">careers</a>&nbsp; 
                    <span style="color:#E8272C;font-size:140%">&#9632;</span>&nbsp;<a href="http://serverfault.com">serverfault.com</a>&nbsp; 
                    <span style="color:#00AFEF;font-size:140%">&#9632;</span>&nbsp;<a href="http://superuser.com">superuser.com</a>&nbsp; 
                    <span style="color:#969696;font-size:140%">&#9632;</span>&nbsp;<a href="http://meta.stackoverflow.com">meta</a>&nbsp; 
                    <span style="color:#46937D;font-size:140%">&#9632;</span>&nbsp;<a href="http://area51.stackexchange.com">area&nbsp;51</a>&nbsp; 
                    <span style="color:#C0D0DC;font-size:140%">&#9632;</span>&nbsp;<a href="http://webapps.stackexchange.com">webapps</a>&nbsp; 
                    <span style="color:#000000;font-size:140%">&#9632;</span>&nbsp;<a href="http://gaming.stackexchange.com">gaming</a>&nbsp; 
                    <span style="color:#dd4814;font-size:140%">&#9632;</span>&nbsp;<a href="http://askubuntu.com">ubuntu</a>&nbsp; 
                    <span style="color:#9ce4fe;font-size:140%">&#9632;</span>&nbsp;<a href="http://webmasters.stackexchange.com">webmasters</a>&nbsp; 
                    <span style="color:#cf4d3f;font-size:140%">&#9632;</span>&nbsp;<a href="http://cooking.stackexchange.com">cooking</a>&nbsp; 
                    <span style="color:#f4f28d;font-size:140%">&#9632;</span>&nbsp;<a href="http://gamedev.stackexchange.com">game development</a>&nbsp; 
                    <span style="color:#0f3559;font-size:140%">&#9632;</span>&nbsp;<a href="http://math.stackexchange.com">math</a>&nbsp; 
                    <span style="color:#f2f2f2;font-size:140%">&#9632;</span>&nbsp;<a href="http://photo.stackexchange.com">photography</a>&nbsp; 
                    <span style="color:#037187;font-size:140%">&#9632;</span>&nbsp;<a href="http://stats.stackexchange.com">stats</a>&nbsp; 
                    <span style="color:#f1e7cc;font-size:140%">&#9632;</span>&nbsp;<a href="http://tex.stackexchange.com">tex</a>&nbsp; 
                    <span style="color:#e1cdae;font-size:140%">&#9632;</span>&nbsp;<a href="http://english.stackexchange.com">english</a>&nbsp; 
                    <span style="color:#a2d9f6;font-size:140%">&#9632;</span>&nbsp;<a href="http://cstheory.stackexchange.com">theoretical cs</a>&nbsp; 
                    <span style="color:#1b3e6c;font-size:140%">&#9632;</span>&nbsp;<a href="http://programmers.stackexchange.com">programmers</a>&nbsp; 
                    <span style="color:#293a5d;font-size:140%">&#9632;</span>&nbsp;<a href="http://unix.stackexchange.com">unix</a>&nbsp;

                    <span style="color:#bec0cb;font-size:140%">&#9632;</span>&nbsp;<a href="http://apple.stackexchange.com">apple</a>&nbsp;
                    <span style="color:#939185;font-size:140%">&#9632;</span>&nbsp;<a href="http://wordpress.stackexchange.com">wordpress</a>

我正在寻找的是一种显示代码的方法(没有它执行)并且具有与本网站一样的颜色编码语法,或者像Text Wrangler(文本编辑器)那样。通常这将是从doc type到/ html的整个页面的代码。

我在许多开发者网站上看到了代码的彩色编码显示,所以我知道它是可行的,但任何谷歌搜索最终都会让我看到如何改变字体颜色的十亿页面。

我需要这个用于MINIMUM的PHP HTML,最好是css javascript和jquery。

PS:颜色编码语法不是必需的,但保持我的格式(换行符间隔空格等)是绝对必要的,并且它发布的代码量是不可行的


11078
2018-02-17 12:11


起源

您是否尝试过对问题中突出显示的代码进行Firebugging? - kapa


答案:


我用 来自Alex Gorbatchev的语法荧光笔 (JavaScript的)。

看到 http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html 作为指示。但是如果你需要支持显示包含脚本元素的HTML,你需要回归到 <pre> 方法,从而逃脱 <> 和 &


9
2018-02-17 12:27





这是你需要做的:

  1. 更换 < > & " 与实体,如 &lt; 你这样做,然后做#2以保持间距。您无法避免转义实体,因为这些字符可能导致无效的HTML,从而导致浏览器中的解析错误。
  2. 使用 <pre><code> 保持间距。在您转义这些特殊字符后,不会导致转义的HTML和PHP被执行(除非您明确告诉PHP和HTML执行它们)。

语法着色有点困难,因为你需要一个能够理解你想要显示的语言的解析器;甚至SO的语法着色并不总是能够正常工作


2
2018-02-17 12:40





请参阅Mark的参考或 看看上一篇文章。效果很好。


1
2018-02-17 12:28





你可以使用语法荧光笔

下载 SyntaxHighlighter的。

SyntaxHighlighter插件也可用于word press用户。

详情请阅读 这个 发布 -


1
2018-01-11 06:54



您的帖子,从“this”这个词链接是404未找到。 - Farini


你看过PHP的内置了吗? highlight_string() 和 highlight_file()函数 功能?


0
2018-02-17 12:19