网页通过Prettify.js实现代码高亮、显示行号功能

这段时间在折腾typecho主题的代码高亮，尝试了很多的方案但是都不是很满意，如果使用插件的解决方案，个人不是很喜欢。

这里我使用Google Code的一款开源的js库Prettify.js，它提供一种简单的形式来着色HTML页面上的程序代码，最值得亮点的地方是不需要指明代码的语言类型，它会自动进行判断。大家也可以在网上找到相对应的wiki。

大家可以访问上面的git地址获取代码文件，不建议去其他地方去下载不能保证代码的完整性。下面简单介绍我使用的折腾方法。

在Github获取代码压缩包，解压得到prettify.js、prettify.css、run_prettify.js文件，上传到你的主题相对应文件夹
编辑你的主题的header.php或者footer.php文件去添加以下代码，进行引入CSS、JS

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

在官方的文档当中，在body的标签中添加onload事件来执行

<body onload=”prettyPrint()”>

这里就可以使用代码高亮了，但是我的主题好像不支持这个东西，使用了onload事件也没有反应，但是在F12调试的时候，输入prettyPrint()才能进行渲染，不然相当于没有生效。

还有一种方法是把prettify.js替换成run_prettify.js就可以不用在body里面写onload事件，就可以让代码自动加载。

Markdown编辑器可以加高亮标签来使用，如果使用HTML要添加<pre> </pre>来实现高亮。我这里就直接使用JQuery来直接实现，记得在主题引入Jquery文件，很多网站都引用了应该不成问题

$(window).load(function(){
  $("pre").addClass("prettyprint"); //给pre标签加一个父标签选择器
  prettyPrint(); //代替body上的onload事件
})

$('pre').each(function(){
    if( !$(this).attr('style') ) $(this).addClass('prettyprint'); //给pre标签添加父标签选择器
    prettyPrint(); //代替body的onload事件
})

显示行号

Prettify可以通过添加linenums元素来添加行号，但是要注意行号的显示的代码
显示格式一：

<pre>
 <code>
   HelloWord！！！
 </code>
</pre>

显示格式二：

<pre>
  HelloWord！！！
</pre>

通过查看你的源代码看你的输出是怎么的，typecho是第一种方法，这里可以给code添加linenums元素来显示

$('code').each(function(){
    if( !$(this).attr('style') ) $(this).addClass('prettyprint linenums')