博客代码美化(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属性，具体说明，上面代码部分已给出说明，这里不在详解。
