这段时间在折腾typecho主题的代码高亮，尝试了很多的方案但是都不是很满意，如果使用插件的解决方案，个人不是很喜欢。
这里我使用Google Code的一款开源的js库Prettify.js，它提供一种简单的形式来着色HTML页面上的程序代码，最值得亮点的地方是不需要指明代码的语言类型，它会自动进行判断。大家也可以在网上找到相对应的wiki。
Github：code-prettify CDN加速：BootCDN
大家可以访问上面的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')参考CSS： https://github.com/googlearchive/code-prettify/blob/master/src/prettify.css
评论