2011-02-17 31 views
11

我想在網頁上顯示代碼;不過,我希望它保持其間距,並用語法進行顏色編碼。在網頁上顯示代碼(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> 

我正在尋找的是顯示的代碼(沒有它執行),並有顏色編碼語法,就像這個網站呢,還是喜歡文字牧馬人(文本編輯器)做的一種方式。通常這將是從doc類型到/ html的整個頁面的代碼。

我見過的代碼彩色編碼顯示在許多開發商的網站,所以我知道它是可行的,但任何谷歌搜索最終把我送到如何改變字體顏色和這樣的HTML格式的十億個。

我需要這個以最低的PHP HTML工作,最好CSS JavaScript的和jQuery也是如此。

PS:顏色編碼語法是沒有必要的,但讓我的格式(換行間距的空白等)是完全必要的,用的代碼量也帖子是不可行的做做手工

+1

您是否嘗試過在你的問題Firebugging高亮顯示的代碼? – kapa 2011-02-17 12:26:00

回答

2

這就是你需要做什麼:

  1. 更換< > & "與實體如&lt;你這樣做,然後做#2保持間距。您無法避免轉義實體,因爲這些字符可能導致導致瀏覽器中解析錯誤的無效HTML。
  2. 使用<pre><code>來保留間距。在轉義這些特殊字符後,不會導致轉義的HTML和PHP被執行(除非您明確告訴PHP和HTML執行它們)。

句法着色有點困難,因爲你需要一個解析器來理解你想要顯示的語言;即使是這樣的語法着色並不總是工作,以及它可能

1

你可以使用語法高亮

Download SyntaxHighlighter的。

SyntaxHighlighter插件也可用於單詞按下用戶。

詳細閱讀this後 -

+0

您的帖子,從單詞「this」鏈接是404未找到。 – Farini 2017-04-01 15:03:39