性价比最高的香港ASP、PHP主机提供商
做网站,就上凡科建站

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

Loading
1
Comodo SLL证书促销 - 免费ssl证书申请_ssl证书购买_ev ssl证书_https证书购买 - GDCA_数安时代

倡萌之前推荐过《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>

其中,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;
}

WP-GeSHi-Highlight 下载安装

在 WordPress后台插件安装界面搜索 WP-GeSHi-Highlight  即可在线安装,或者在这里下载 WP-GeSHi-Highlight

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

支付宝扫码打赏 微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

沃鹏科技 - 专业的WordPress建站服务平台

关于 倡萌

一个疯狂的 WordPress 爱好者,喜欢折腾 WordPress 主题,分享 WordPress 资源。如果你也喜欢 WordPress,欢迎和我一起交流!

8 条评论

  1. 请问怎样才可以实行代码换行?谢谢

  2. 对于c++代码的高亮显示,变量和函数名都是黄色的,和背景白色非常的不搭,有没有办法解决??

  3. :mrgreen: 不错,收藏了。在这学到不少知识

  4. 用了好像无效。不怎么好用。 :arrow:

  5. 每次网站遇到问题都百度,很多时候百度到的靠谱答案都是博主的站,以后常来学习。

  6. 用手机端的代码大小不一样是怎么回事?

  7. :mrgreen: 这个用起来也不错啊

  8. 要是能有后台按钮快捷插入就好了!

发表评论