WordPress 代碼高亮插件 WP-GeSHi-Highlight

倡萌之前推薦過《WordPress代碼高亮插件：WP-Syntax》，這個(gè)插件很好用，但是已經(jīng)2年多沒有更新了，今天推薦的 WP-GeSHi-Highlight 是對(duì) WP-Syntax 進(jìn)行重寫改進(jìn)的高亮插件，輸出代碼更加簡(jiǎn)潔，跟進(jìn)最新的 WordPress API 調(diào)用，完全兼用 WP-Syntax （使用方法，參數(shù)都繼承了）。WP-GeSHi-Highlight  支持N多種語言高亮，具體可以看這里。

WP-GeSHi-Highlight 代碼書寫格式

<pre lang="html" line="1" escaped="true" >
//這里添加代碼……
</pre>

其中，lang=”html”表示代碼語言為html，請(qǐng)根據(jù)自己需要修改； line=”1″ 表示顯示行號(hào)，如果不需要，去掉即可；escaped=”true” 是為了防止代碼轉(zhuǎn)義，如果不需要，去掉即可。

注意：在wordpress后臺(tái)使用 WP-GeSHi-Highlight 等代碼高亮插件，需要在html模式下添加代碼，不要隨意切換到可視化模式，否則代碼就容易轉(zhuǎn)義！！

WP-GeSHi-Highlight 樣式自定義

WordPress大學(xué) 目前已經(jīng)更換了 WP-GeSHi-Highlight ，自帶的高亮效果已經(jīng)很不錯(cuò)了。如果你不滿意自帶的效果，WP-GeSHi-Highlight 插件目錄下有一個(gè) wp-geshi-highlight.css 文件，只需將這個(gè)文件復(fù)制到你當(dāng)前所用的主題根目錄，然后修改里面的css代碼即可。這樣一來，即使更新 WP-GeSHi-Highlight 插件，也不會(huì)丟失你的自定義樣式了。

以下就是 WordPress大學(xué) 目前使用的樣式，如果你需要，可以用來覆蓋 wp-geshi-highlight.css 原有代碼即可。

/*
   Copyright 2009-2014, Jan-Philip Gehrcke (http://gehrcke.de)

   Simplistic styling. Tested with TwentyTwelve, TwentyThirteen and
   a number of custom themes in modern versions of Firefox (27) and Chrome (33).
   An absolute font size set for pre, span, li (within highlight container)
   is the safest solution for proper code display, especially in Chrome.

   I tried to set all relevant styles. However, certain themes might define
   styles affecting the code display (it is difficult to anticipate these cases,
   so I expect this to happen). In these cases, you need to identify
   the corresponding selectors and override your theme's styles via this file
   (wp-geshi-highlight.css), placed in your theme's directory.
*/
.wp-geshi-highlight pre, .wp-geshi-highlight span {
    overflow: visible;
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    background: none;
    font-size: 14px;
    font-family: Consolas, Monaco, 'Microsoft YaHei','WenQuanYi Micro Hei' ,'Lucida Console', monospace;
    word-wrap: normal; /* Otherwise Chrome wraps lines */
    white-space: pre;
}

.wp-geshi-highlight ol {
    margin: 0;
    padding: 0;
}

.wp-geshi-highlight ol > li {
    position: relative; /* Create a positioning context */
    margin: 0 0 0 30px; /* Give each list item a left margin to make room for the numbers */
}

.wp-geshi-highlight li {
    padding-left: 5px;
    font-family: monospace;
    font-size: 14px;
    border-left: 1px solid #eee;
    }

.wp-geshi-highlight {
    padding: 0 0 0 15px;
    margin: 2px 0 30px 0;
    overflow-x: auto;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    background-color: #f8f8f8;
    box-shadow: 0 8px 7px -10px #CCC, 0 -8px 7px -10px #CCC;
}

WP-GeSHi-Highlight 下載安裝

在 WordPress后臺(tái)插件安裝界面搜索 WP-GeSHi-Highlight  即可在線安裝，或者在這里下載 WP-GeSHi-Highlight

需要了解更多用法和幫助，請(qǐng)訪問作者網(wǎng)站