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

时间:2022-11-22 22:48:04

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:

请不要回复:

  1. Replacing the < > & " with entities such as &lt; This is not what I need: doing this removes all my line breaks and my spacing and provides no color
  2. 用<这不是我需要的实体替换<>&“:这样做会删除我的所有换行符和间距,并且不提供颜色

  3. <pre> <code> This totally fails it still tries to execute the HTML and PHP
  4.  这完全失败了它仍然试图执行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%">&#9632;</span>&nbsp;<a href="http://*.com">*.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.*.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.*.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>

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 type到/ 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 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:颜色编码语法不是必需的,但保持我的格式(换行符间隔空格等)是绝对必要的,并且它发布的代码量是不可行的

5 个解决方案

#1


9  

I use the syntax highlighter from Alex Gorbatchev (JavaScript).

我使用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 &.

有关说明,请参阅http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html。但是如果你需要支持显示包含脚本元素的HTML,你需要回退到

方法,从而逃避<,>和&。

#2


2  

This is what you need to do:

这是你需要做的:

  1. Replace < > & " with entities such as &lt; 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.
  2. 将<>&“替换为<您执行此操作,然后执行#2以保留间距。您无法避免转义实体,因为这些字符可能导致无效的HTML,从而导致浏览器中的解析错误。

  3. 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).
  4. 使用

     来保留间距。在您转义这些特殊字符后,不会导致转义的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的语法着色并不总是能够正常工作

#3


1  

See Mark's reference or Check out this previous post. Works well.

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

#4


1  

you can use syntax highlighter

你可以使用语法荧光笔

Download SyntaxHighlighter.

SyntaxHighlighter plugin also available for word press user.

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

For details read this post -

有关详细信息,请阅读此帖

#5


0  

Have you looked at PHP's built-in highlight_string() and highlight_file() functions?

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

#1


9  

I use the syntax highlighter from Alex Gorbatchev (JavaScript).

我使用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 &.

有关说明,请参阅http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html。但是如果你需要支持显示包含脚本元素的HTML,你需要回退到

方法,从而逃避<,>和&。

#2


2  

This is what you need to do:

这是你需要做的:

  1. Replace < > & " with entities such as &lt; 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.
  2. 将<>&“替换为<您执行此操作,然后执行#2以保留间距。您无法避免转义实体,因为这些字符可能导致无效的HTML,从而导致浏览器中的解析错误。

  3. 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).
  4. 使用

     来保留间距。在您转义这些特殊字符后,不会导致转义的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的语法着色并不总是能够正常工作

#3


1  

See Mark's reference or Check out this previous post. Works well.

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

#4


1  

you can use syntax highlighter

你可以使用语法荧光笔

Download SyntaxHighlighter.

SyntaxHighlighter plugin also available for word press user.

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

For details read this post -

有关详细信息,请阅读此帖

#5


0  

Have you looked at PHP's built-in highlight_string() and highlight_file() functions?

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