WordPress页面增加代码高亮插件highlight.js

3,057 views

作为技术相关的博客,为了说明问题,文章里少不了要贴一些代码;使用MarkdownPad输出的HTML里虽然使用<pre><code>...</code></pre>标签可以输出代码块,但缺少样式,看起来总是怪怪的,感觉少了点什么。

于是在网上搜索一番,发现大体上有两种选择:

  • WordPress下载具有代码高亮能力的插件,安装到网站上;具有类似功能的插件太多,以关键字SyntaxHighlighterWordPress搜索,可以找到很多类似的插件,这里就不再一一列举;
  • 下载具有代码高亮能力的js插件,修改相应主题的页面,手工增加相关的js和css文件;具有类似能力的js插件也有很多,比较有名的有:

我比较懒,不打算在代码高亮上花太多时间,所以刚开始是准备安装一个插件了事的。不过看过网友的各色经验介绍之后,发现安装插件会引入很多额外的js、css,说不定会拖累我的博客小站的访问效率;而网友自行安装js插件的过程又非常简单,所以权衡再三,感觉是折腾一下吧。

插件安装

参照网友的介绍,感觉highlight.js的使用很简单,所以直接上手试验highlight.js,没尝试其它选择。

我使用的WordPress版本是4.1,当前博客的主题为twentyten,highlight.js是在官网裁剪过的版本。

  1. 在网站根目录的extensions下新建名为highlight的目录,把从官网下载到的js和css全部展平放进去;
  2. 修改主题目录下的header.php文件,找到<head>标签闭合前的位置,增加代码
    <link rel="stylesheet" href="<?php echo get_site_url() . '/extensions/highlight/tomorrow-night-blue.css';?>"/>
    
  3. 修改主题目录下的footer.php文件,找到<body>标签闭合前的位置,增加代码
    <script src="<?php echo get_site_url() . '/extensions/highlight/highlight.min.js'; ?>"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    

上述步骤完成之后,登录页面检查代码高亮的效果,发现文章内引用的代码已增加了高亮的样式,这下文章看起来感觉专业多了。但有一点小瑕疵,仔细观察代码块,发现代码周围多出来一些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

 



若非注明,均为原创,欢迎转载,转载请注明来源:WordPress页面增加代码高亮插件highlight.js

关于 JackieAtHome

基层程序员,八年之后重新启航

此条目发表在 WordPress 分类目录,贴了 , 标签。将固定链接加入收藏夹。