博客代码高亮

博客代码高亮

-使用SyntaxHighlighter使Blogger上发布的代码高亮

简介

使博客上发布的代码格式化显示，或者更明确的说，代码高亮，能让读者更方便的看到代码中最核心的部分，SyntaxHighlighter是用JavaScript开发的一个用于代码高亮的插件。现在被用于广泛的使用情景中，比如Apache，Aptana，Mozilla，Yahoo，Wordpress，Bug Labs，Freshbooks等等，对于有高度自由的Blogger，我们也可以通过代码托管的形式（hosting），将SyntaxHighlighter的代码插入Blogger的模板中，达到代码高亮的目的。

SyntaxHighlighter是GitHub上的一个开源项目，点击这里，可以进入SyntaxHighlighter位于GitHub的主页。

SyntaxHighlighter安装指南

第一步，进入博客后台管理界面，点击模板->修改HTML

 

第二步，插入以下代码到指定位置，可以Ctrl+F，搜索</head>，再将代码插入到</head>前

 

<!-- Syntax Highlighter Addition START -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>
<!-- Syntax Highlighter Addition END -->

第三步，点击保存模板->后退。上面的代码片段提供了ActionScrip3、Bash/Shell、ColdFusion、C#等23种格式刷。我们可以根据自己的实际需要删除自己不用的代码所对应的托管代码链接。 SyntaxHighlighter支持的格式刷，点击这里查看。
第四步，撰写博客时，进入HTML编辑选项，有两种方法可以显示高亮代码
<pre/>方法
一个具体的例子， 来源自SytaxHighlighter教程

<pre class="brush: js">
function foo()
{
}
</pre>
 
<!-- Finally, to actually run the highlighter, you need to include this JS on your page -->
<script type="text/javascript">
     SyntaxHighlighter.all()
</script>

点击发布后，将会显示

function foo()
{
}

<script/>方法
注意有CDATA标签

<script type="syntaxhighlighter" class="brush: js"><![CDATA[
  /**
   * SyntaxHighlighter
   */
  function foo()
  {
      if (counter <= 10)
          return;
      // it works!
  }
]]></script>

将会显示 注意在贴代码时，先使用HTML编码工具将代码转换为HTML格式再进行粘贴，点击这里，一个在线的HTML编码工具。