WordPress 代碼高亮外掛程式 WP-GeSHi-Highlight

本文目錄1WP-GeSHi-Highlight 代碼書寫格式2WP-GeSHi-Highlight 樣式自定義3WP-GeSHi-Highlight 下載安裝

之前推薦過《WordPress代碼高亮外掛：WP-Syntax》，這個外掛很好用，但是已經2年多沒有更新瞭，今天推薦的 WP-GeSHi-Highlight 是對 WP-Syntax 進行重寫改進的高亮外掛，輸出代碼更加簡潔，跟進最新的 WordPress API 調用，完全兼用 WP-Syntax （使用方法，參數都繼承瞭）。WP-GeSHi-Highlight  支援N多種語言高亮，具體可以看這裡。

WP-GeSHi-Highlight 代碼書寫格式

1
2
3

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

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

其中，lang=”html”表示代碼語言為html，請根據自己需要修改； line=”1″ 表示顯示行號，如果不需要，去掉即可；escaped=”true” 是為瞭防止代碼轉義，如果不需要，去掉即可。

註意：在wordpress後臺使用 WP-GeSHi-Highlight 等代碼高亮外掛，需要在html模式下添加代碼，不要隨意切換到可視化模式，否則代碼就容易轉義！！

WP-GeSHi-Highlight 樣式自定義

WordPress大學 目前已經更換瞭 WP-GeSHi-Highlight ，自帶的高亮效果已經很不錯瞭。如果你不滿意自帶的效果，WP-GeSHi-Highlight 外掛目錄下有一個 wp-geshi-highlight.css 文件，隻需將這個文件復制到你當前所用的主題根目錄，然後修改裡面的css代碼即可。這樣一來，即使更新 WP-GeSHi-Highlight 外掛，也不會丟失你的自定義樣式瞭。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

/*
   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;
}

/*
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後臺外掛安裝界面搜索 WP-GeSHi-Highlight  即可線上安裝，或者在這裡下載 WP-GeSHi-Highlight

需要瞭解更多用法和幫助，請訪問作者網站