再谈WordPress代码高亮的插件与非插件法实现方法

wordPress代码高亮方法很多,有人直接使用前端工具箱编码,也有人使用WordPress插件。本文主要说的后者:一种使用自动语法高亮google-code-prettify;另外一种就是使用CodeColorer、WP-Syntax、WP-Code等插件。

文章中引入代码的时候,为了更加直观的展示,使读者更容易的获得所需要的东西,代码高亮是很必要的。在代码多的时候,显得尤为重要;很难想象,在没有代码高亮的效果下,阅读多个分页的代码,是件多么糟糕的事情。还有一个原因:WordPress会自动把半角的引号自动替换成全角引号,这是无法忍受的。试想,别人拷了这段代码,还得重新替换一个,是件多么不爽的事情。

非插件法实现WordPress代码高亮

1、使用前端工具箱

WordPress代码高亮方法很多,有人直接把代码放入前端工具箱内编码一下,然后再拷到文章编辑器中;直接百度一下:前端工具箱;或者下载一个前端工具箱软件。说实话,我不推荐这种走下坡路的做法。css的诞生,就注定了它的使命:页面与样式分离。不仅是代码简洁性,更重要的是可维护性和便捷性。

2、使用自动语法高亮google-code-prettify。下载地址:http://code.google.com/p/google-code-prettify/

特点是无须指定语言,即使非WordPress亦可实现代码高亮。

使用方法:

1、head标签中引入js脚本和css样式表:

<script src="prettify.js" type="text/javascript"></<script><br />

2、然后添加body标签中添加:

<body onload="prettyPrint()"

3、在

<pre class=”prettyprint”...</pre>

或者

<code class=”prettyprint”...

中间放上代码片段,它就会自动被美化了。

插件法实现WordPress代码高亮

几种常用的WordPress代码高亮插件:WP-Syntax、WP-Code、Crayon Syntax Highlighter、Codecolorersyntax-highlighter-and-code-prettifier等。安装和使用插件很方便,直接后台插件搜索名称,点击安装即可。

发表评论

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