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 1 2 3 1 2 3

<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">pre</span> <span style="color: #000066;">lang</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;html&quot;</span> line<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;1&quot;</span> escaped<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;true&quot;</span> &gt;</span> //这里添加代码…… <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">pre</span>&gt;</span> 1 2 3 <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">pre</span> <span style="color: #000066;">lang</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;html&quot;</span> line<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;1&quot;</span> escaped<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;true&quot;</span> &gt;</span> //这里添加代码…… <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">pre</span>&gt;</span>

<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 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 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

<span style="color: #808080; font-style: italic;">/* Copyright 2009-2014, Jan-Philip Gehrcke (http://gehrcke.de) &nbsp; 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. &nbsp; 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. */</span> <span style="color: #6666ff;">.wp-geshi-highlight</span> <span style="color: #993333;">pre</span><span style="color: #00AA00;">,</span> <span style="color: #6666ff;">.wp-geshi-highlight</span> span <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">visible</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">box-shadow</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">14px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">font-family</span><span style="color: #00AA00;">:</span> Consolas<span style="color: #00AA00;">,</span> Monaco<span style="color: #00AA00;">,</span> <span style="color: #ff0000;">'Microsoft YaHei'</span><span style="color: #00AA00;">,</span><span style="color: #ff0000;">'WenQuanYi Micro Hei'</span> <span style="color: #00AA00;">,</span><span style="color: #ff0000;">'Lucida Console'</span><span style="color: #00AA00;">,</span> <span style="color: #993333;">monospace</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">word-wrap</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">normal</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* Otherwise Chrome wraps lines */</span> <span style="color: #000000; font-weight: bold;">white-space</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">pre</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span> &nbsp; <span style="color: #6666ff;">.wp-geshi-highlight</span> ol <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span> &nbsp; <span style="color: #6666ff;">.wp-geshi-highlight</span> ol <span style="color: #00AA00;">&gt;</span> li <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">relative</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* Create a positioning context */</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">30px</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* Give each list item a left margin to make room for the numbers */</span> <span style="color: #00AA00;">&#125;</span> &nbsp; <span style="color: #6666ff;">.wp-geshi-highlight</span> li <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">padding-left</span><span style="color: #00AA00;">:</span> <span style="color: #933;">5px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">font-family</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">monospace</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">14px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">border-left</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#eee</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span> &nbsp; <span style="color: #6666ff;">.wp-geshi-highlight</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">15px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #933;">2px</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">30px</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">overflow-x</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">border-bottom</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#ccc</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">border-top</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#ccc</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#f8f8f8</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">box-shadow</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">8px</span> <span style="color: #933;">7px</span> <span style="color: #933;">-10px</span> <span style="color: #cc00cc;">#CCC</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">-8px</span> <span style="color: #933;">7px</span> <span style="color: #933;">-10px</span> <span style="color: #cc00cc;">#CCC</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span> 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 <span style="color: #808080; font-style: italic;">/*    Copyright 2009-2014, Jan-Philip Gehrcke (http://gehrcke.de) &nbsp;    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. &nbsp;    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. */</span> <span style="color: #6666ff;">.wp-geshi-highlight</span> <span style="color: #993333;">pre</span><span style="color: #00AA00;">,</span> <span style="color: #6666ff;">.wp-geshi-highlight</span> span <span style="color: #00AA00;">&#123;</span>     <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">visible</span><span style="color: #00AA00;">;</span>     <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>     <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>     <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>     <span style="color: #000000; font-weight: bold;">box-shadow</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>     <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>     <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">14px</span><span style="color: #00AA00;">;</span>     <span style="color: #000000; font-weight: bold;">font-family</span><span style="color: #00AA00;">:</span> Consolas<span style="color: #00AA00;">,</span> Monaco<span style="color: #00AA00;">,</span> <span style="color: #ff0000;">'Microsoft YaHei'</span><span style="color: #00AA00;">,</span><span style="color: #ff0000;">'WenQuanYi Micro Hei'</span> <span style="color: #00AA00;">,</span><span style="color: #ff0000;">'Lucida Console'</span><span style="color: #00AA00;">,</span> <span style="color: #993333;">monospace</span><span style="color: #00AA00;">;</span>     <span style="color: #000000; font-weight: bold;">word-wrap</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">normal</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* Otherwise Chrome wraps lines */</span>     <span style="color: #000000; font-weight: bold;">white-space</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">pre</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span> &nbsp; <span style="color: #6666ff;">.wp-geshi-highlight</span> ol <span style="color: #00AA00;">&#123;</span>     <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>     <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span> &nbsp; <span style="color: #6666ff;">.wp-geshi-highlight</span> ol <span style="color: #00AA00;">&gt;</span> li <span style="color: #00AA00;">&#123;</span>     <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">relative</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* Create a positioning context */</span>     <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">30px</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* Give each list item a left margin to make room for the numbers */</span> <span style="color: #00AA00;">&#125;</span> &nbsp; <span style="color: #6666ff;">.wp-geshi-highlight</span> li <span style="color: #00AA00;">&#123;</span>     <span style="color: #000000; font-weight: bold;">padding-left</span><span style="color: #00AA00;">:</span> <span style="color: #933;">5px</span><span style="color: #00AA00;">;</span>     <span style="color: #000000; font-weight: bold;">font-family</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">monospace</span><span style="color: #00AA00;">;</span>     <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span> <span style="color: #933;">14px</span><span style="color: #00AA00;">;</span>     <span style="color: #000000; font-weight: bold;">border-left</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#eee</span><span style="color: #00AA00;">;</span>     <span style="color: #00AA00;">&#125;</span> &nbsp; <span style="color: #6666ff;">.wp-geshi-highlight</span> <span style="color: #00AA00;">&#123;</span>     <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">15px</span><span style="color: #00AA00;">;</span>     <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #933;">2px</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">30px</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>     <span style="color: #000000; font-weight: bold;">overflow-x</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span>     <span style="color: #000000; font-weight: bold;">border-bottom</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#ccc</span><span style="color: #00AA00;">;</span>     <span style="color: #000000; font-weight: bold;">border-top</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#ccc</span><span style="color: #00AA00;">;</span>     <span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#f8f8f8</span><span style="color: #00AA00;">;</span>     <span style="color: #000000; font-weight: bold;">box-shadow</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">8px</span> <span style="color: #933;">7px</span> <span style="color: #933;">-10px</span> <span style="color: #cc00cc;">#CCC</span><span style="color: #00AA00;">,</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">-8px</span> <span style="color: #933;">7px</span> <span style="color: #933;">-10px</span> <span style="color: #cc00cc;">#CCC</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>

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

需要了解更多用法和帮助，请访问作者网站

赏 如果本文对你有帮助，请打赏作者，鼓励我们继续写作！