作为技术相关的博客,为了说明问题,文章里少不了要贴一些代码;使用MarkdownPad输出的HTML里虽然使用
...
标签可以输出代码块,但缺少样式,看起来总是怪怪的,感觉少了点什么。
于是在网上搜索一番,发现大体上有两种选择:
从WordPress下载具有代码高亮能力的插件,安装到网站上;具有类似功能的插件太多,以关键字SyntaxHighlighter在WordPress搜索,可以找到很多类似的插件,这里就不再一一列举;
下载具有代码高亮能力的js插件,修改相应主题的页面,手工增加相关的js和css文件;具有类似能力的js插件也有很多,比较有名的有:
我比较懒,不打算在代码高亮上花太多时间,所以刚开始是准备安装一个插件了事的。不过看过网友的各色经验介绍之后,发现安装插件会引入很多额外的js、css,说不定会拖累我的博客小站的访问效率;而网友自行安装js插件的过程又非常简单,所以权衡再三,感觉是折腾一下吧。
插件安装
参照网友的介绍,感觉highlight.js的使用很简单,所以直接上手试验highlight.js,没尝试其它选择。
我使用的WordPress版本是4.1,当前博客的主题为twentyten,highlight.js是在官网裁剪过的版本。
在网站根目录的extensions下新建名为highlight的目录,把从官网下载到的js和css全部展平放进去;
修改主题目录下的header.php文件,找到
标签闭合前的位置,增加代码修改主题目录下的footer.php文件,找到
标签闭合前的位置,增加代码上述步骤完成之后,登录页面检查代码高亮的效果,发现文章内引用的代码已增加了高亮的样式,这下文章看起来感觉专业多了。但有一点小瑕疵,仔细观察代码块,发现代码周围多出来一些padding,感觉不太舒服。于是使用浏览器的样式查看工具检查一番,发现相关样式定义在主题目录下的style.css文件里,简单做一些调整,如下:
blockquote i {
font-style: normal;
}
pre {
background: #f7f7f7;
color: #222;
line-height: 18px;
margin-bottom: 18px;
overflow: auto;
/*padding: 1.5em;*/---把这行注释掉,代码内容周围的padding就消失了
}
abbr,
acronym {
border-bottom: 1px dotted #666;
cursor: help;
}
padding就消失咯。
参考资料
http://www.whidy.net/wordpress-highlight-js-intro.html
http://kodango.com/highlight-code-with-google-code-prettify
http://www.iteblog.com/archives/1320
http://www.tuicool.com/articles/fAVVRfn
http://www.oschina.net/news/26092/syntax-highlighter-plugins-for-wordpress
http://www.cnblogs.com/lhb25/p/12-best-wordpress-syntax-highlighter-plugins.html
http://info.9iphp.com/25-syntax-highlighters-1
http://www.oschina.net/news/34861/8-jquery-syntax-highlighting-plugins