利用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等代码的时候,符号<要替换成&lt;否则渲染失败。还有就是渲染有html和js代码共存的,要在pre利用添加一个属性html-script:true,这样才能够正确识别。pre的更多参数点击这里>>

posted @ 2017-03-22 12:01  WOZIEN  阅读(233)  评论(0编辑  收藏  举报