利用SyntaxHighlighter插件高亮代码
SyntaxHighlighter官网地址:http://alexgorbatchev.com/SyntaxHighlighter/
上传插件文件到博客园中
下载的插件文件解压缩后有挺多文件,不过要用到的也不多。其中必须上传的文件有shCore.css和shCore.js,还有上传的是想要的主题css文件,比如我用的主题是shCoreEmacs.css,最后上传的要支持语言的js文件,比如我的代码是js代码,我就要上传js文件:shBrushJScript.js,如图1;另外一些常见的js对应的语言如图2所示。
图1 上传文件到博客园
图2 语言参数表
在设置中加入html代码到首部中:
把上传的文件引入到html首部中,路径点击你上传文件出现的url就可以了。最后还要加入一句js代码,表示用插件来渲染语句,如图3
图3 插入链接到首部
编写代码到固定位置:
编写代码的固定格式为:
<pre class="brush: xxx">
//你的代码
<pre>
其中xxx用图2的brush aliase替换就行了。
编写js 代码实例:
比如:
<pre class="brush: js">
function(){
return 'hello';
}
<pre>
高亮代码结果如下:
function(){ return 'hello'; }
注意:在添加html,xml等代码的时候,符号<要替换成<否则渲染失败。还有就是渲染有html和js代码共存的,要在pre利用添加一个属性html-script:true,这样才能够正确识别。pre的更多参数点击这里>>