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

  之前推荐过《WordPress代码高亮插件:WP-Syntax》,这个插件很好用,但是已经2年多没有更新了,今天推荐的 WP-GeSHi-Highlight 是对 WP-Syntax 进行重写改进的高亮插件,输出代码更加简洁,跟进最新的 WordPress API 调用,完全兼用 WP-Syntax (使用方法,参数都继承了)。WP-GeSHi-Highlight 支持N多种语言高亮,具体可以看这里

WP-GeSHi-Highlight 代码书写格式

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

  其中,lang=”html”表示代码语言为html,请根据自己需要修改; line=”1″ 表示显示行号,如果不需要,去掉即可;escaped=”true” 是为了防止代码转义,如果不需要,去掉即可。

  注意:在wordpress后台使用 WP-GeSHi-Highlight 等代码高亮插件,需要在html模式下添加代码,不要随意切换到可视化模式,否则代码就容易转义!!

WP-GeSHi-Highlight 样式自定义

  我的网站目前已经更换了 WP-GeSHi-Highlight ,自带的高亮效果已经很不错了。如果你不满意自带的效果,WP-GeSHi-Highlight 插件目录下有一个 wp-geshi-highlight.css 文件,只需将这个文件复制到你当前所用的主题根目录,然后修改里面的css代码即可。这样一来,即使更新 WP-GeSHi-Highlight 插件,也不会丢失你的自定义样式了。

  以下就是 WordPress大学 目前使用的样式,如果你需要,可以用来覆盖 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后台插件安装界面搜索 WP-GeSHi-Highlight 即可在线安装,或者在这里下载 WP-GeSHi-Highlight

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

  另外有一款官方推荐的代码高亮插件 SyntaxHighlighter Evolved 也相当不错,对 WordPress 的兼容性非常好,有兴趣的朋友也可以关注一下。

资料:WP-GeSHi-Highlight 支持高亮的语言

# WP-GeSHi-Highlight by Jan-Philip Gehrcke -- http://gehrcke.de
# Version 1.0.8
# Allowed values for the `lang` attribute (GeSHi supported languages strings):

4cs
6502acme
6502kickass
6502tasm
68000devpac
abap
actionscript
actionscript3
ada
algol68
apache
applescript
apt_sources
asm
asp
autoconf
autohotkey
autoit
avisynth
awk
bascomavr
bash
basic4gl
bf
bibtex
blitzbasic
bnf
boo
c
caddcl
cadlisp
cfdg
cfm
chaiscript
cil
clojure
cmake
cobol
coffeescript
cpp-qt
cpp
csharp
css
cuesheet
c_loadrunner
c_mac
d
dcs
delphi
diff
div
dos
dot
e
ecmascript
eiffel
email
epc
erlang
euphoria
f1
falcon
fo
fortran
freebasic
fsharp
gambas
gdb
genero
genie
gettext
glsl
gml
gnuplot
go
groovy
gwbasic
haskell
hicest
hq9plus
html4strict
html5
icon
idl
ini
inno
intercal
io
j
java
java5
javascript
jquery
kixtart
klonec
klonecpp
latex
lb
lisp
llvm
locobasic
logtalk
lolcode
lotusformulas
lotusscript
lscript
lsl2
lua
m68k
magiksf
make
mapbasic
matlab
mirc
mmix
modula2
modula3
mpasm
mxml
mysql
newlisp
nginx
nsis
oberon2
objc
objeck
ocaml-brief
ocaml
oobas
oracle11
oracle8
oxygene
oz
pascal
pcre
per
perl
perl6
pf
php-brief
php
pic16
pike
pixelbender
pli
plsql
postgresql
povray
powerbuilder
powershell
proftpd
progress
prolog
properties
providex
purebasic
pycon
python
q
qbasic
rails
rebol
reg
robots
rpmspec
rsplus
ruby
sas
scala
scheme
scilab
sdlbasic
smalltalk
smarty
sql
systemverilog
tcl
teraterm
text
thinbasic
tsql
typoscript
unicon
uscript
vala
vb
vbnet
verilog
vhdl
vim
visualfoxpro
visualprolog
whitespace
whois
winbatch
xbasic
xml
xorg_conf
xpp
yaml
z80
zxbasic

暂无评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注