WordPress代码高亮【插件与非插件法实现】

记录归档 2014年11月23日 下午4:51 1,107 次浏览

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样式表：

<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>

2.然后添加body标签中添加：

<body onload="prettyPrint()">

3.在<pre class=”prettyprint”>…</pre>或 <code class=”prettyprint”>…</code>中间放上代码片段,它就会自动被美化了。

【插件法】实现WordPress代码高亮

类似的插件很多，列举几种常用的WordPress代码高亮插件：

  1. CodeColorer
  2. WP-Syntax
  3. WP-Code
  4. Crayon Syntax Highlighter（本站现在采用这种方式。）
  5. WP Code Highlight

安装和使用很方便，直接后台插件搜索名称，点击安装即可，里面有详细的说明，不赘言。

展开评论