倡萌之前推荐过《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 样式自定义
WordPress大学 目前已经更换了 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 即可在线安装
感谢欣赏,遥握:)
赏