江天一色: Blogger : 代码高亮(code syntax highlighter)

使用SyntaxHighlighter实现代码高亮，配置参数见：SyntaxHighlighter/Configuration。

blogger -> 布局 -> 修改HTML，在<head>之前添加：

<link type='text/css' rel='stylesheet'
href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' /> 
<link  type='text/css' rel='stylesheet'
href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeMidnight.css' />

blogger -> 布局 -> 页面元素 -> 添加小工具 -> HTML/JavaScript代码，内容如下：

<script language="javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script>
<script language="javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shLegacy.js"></script>
<script language="javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js"></script>
<script language="javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js"></script>
<script language="javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js"></script>
<script language="javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js"></script>
<script language="javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js"></script>
<script language="javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js"></script>
<script language="javascript">
var attempts = 0;
  var timerHandle = setTimeout("checkIfHilighterLoaded()", 350);

  function checkIfHilighterLoaded(){
    try{
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.strings.viewSource = "查看源代码";
SyntaxHighlighter.config.strings.copyToClipboard = "复制到剪贴板";
SyntaxHighlighter.config.strings.print = "打印";
SyntaxHighlighter.config.strings.help = "关于";
SyntaxHighlighter.config.clipboardSwf = 
    'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';      
SyntaxHighlighter.defaults['gutter'] = false;
SyntaxHighlighter.all(); 
    
      clearTimeout(timerHandle);
    }
    catch(e){
      clearTimeout(timerHandle);

      if(attempts < 25){
        timerHandle = setTimeout("checkIfHilighterLoaded()", 350);
      }
      attempts++;
    }
  }
</script>

高亮测试：

<pre class="brush: perl;">
#!/usr/bin/perl
print "Hello World!\n";
</pre>

效果如下：

#!/usr/bin/perl
print "Hello World!\n";

行号显示切换(gutter)：

<pre class="brush: perl; gutter : true; ">
#!/usr/bin/perl
print "Hello World!\n";
</pre>

效果如下：

#!/usr/bin/perl
print "Hello World!\n";

江天一色

2009年4月30日星期四

Blogger : 代码高亮(code syntax highlighter)

1 条评论: