博客代码美化(SyntaxHighlighter)

这篇博文主要讲解自己使用SyntaxHighlighter对代码进行美工中遇见的问题以及如何使用SyntaxHighlighter？

首先来看看SyntaxHighlighter对代码美工的效果吧！

2015年8月23日以前贪玩小神个人博客代码效果如下：

function helloSyntaxHighlighter()
{
return "hi!";
}

使用SyntaxHighlighter美化代码效果如下：

?

1 2 3 4 5 6

function helloSyntaxHighlighter() {   return "hi!"; }

那么如何使用SyntaxHighlighter呢？

第一步：下载SyntaxHighlighter

下载SyntaxHighlighter，下面给出下载地址：

a）http://pan.baidu.com/s/1i3JAZqP （个人百度云盘分享，各个版本都有）

b）http://alexgorbatchev.com/SyntaxHighlighter/download/ （官方网站 ，就是进去有点慢）

第二步：配置SyntaxHighlighter

首先，选择SyntaxHighlighter的一个版本，个人选用的最新版本syntaxhighlighter_3.0.83，建议大家选相同的版本，不同版本使用方法有差异。

然后，选择syntaxhighlighter_3.0.83进行解压，将解压后的文件粘贴复制到你的网站目录下，比如我的心情随笔文章都存放在feel/目录下。

最后，在页面中引入shCore.js、shCoreDefault.css、shBrushJScript.js核心文件（注：仅syntaxhighlighter_3.0.83使用的引入）

第三步：使用SyntaxHighlighter

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

-------SyntaxHighlighter使用步骤-------- #第一步在head中配置SyntaxHighlighter <!--SyntaxHighlighter高亮代码使用-->  <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script>   <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.js"></script>     <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.css"> //注意此处的路径必须是SyntaxHighlighter文件存放的位置，若引用不对，则代码美化将失败     <script type="text/javascript">     SyntaxHighlighter.config.bloggerMode = true;  /*博客模式。如果在博客网上使用该插件，因为通常博主习惯用  替换所有的新行(’\n’)，这会造成SyntaxHighlighter 插件无法拆开每一行。开启此选项内部会将  替换为新行’\n’*/     SyntaxHighlighter.all();     </script>  <!--SyntaxHighlighter结束-->   #第二步在body中使用SyntaxHighlighter <pre class="brush: js">代码部分</pre>

学习使用SyntaxHighlighter的过程中，博主参考了很多大虾的文章，现推荐几篇如下，最后感谢这些大大的分享！

http://www.cnblogs.com/heyuquan/archive/2012/09/28/2707632.html （对SyntaxHighlighter插件进行了十分详细的介绍——滴答的雨）

http://www.chengxuyuans.com/jquery_plugin/54938.html （SyntaxHighlighter使用步骤做了详细的说明——www.chengxuyuans.com）

在使用syntaxhighlighter的过程中，遇见了一个代码不能换行的问题：

因为个人博客源代码的设置，所以代码中所有的换行符'\n'，会被替换成<br /> 。导致每行代码的末尾都会有<br>。

解决办法：配置syntaxhighlighter.config的bloggerMode属性，具体说明，上面代码部分已给出说明，这里不在详解。