从去年底开始重新使用 Blogger 写博客以来就一直想把博客的代码高亮搞一搞，无奈实在太懒，不想折腾，直到今天才终于把代码高亮实现了。

其实要实现 Blogger 代码高亮真的非常简单，就是在模板里引用几行代码，然后在想要代码高亮的地方写成预定好的格式（使用指定的标签包裹）就行了。

代码高亮的实现方式有好几种，最流行的当属 Alex Gorbatchev 的  SyntaxHighlighter，本文就以此为例把整个过程整理一下，以供参考。

  1. 首先把模板备份一下，以防万一。无论什么时候修改模板，都要记着先备份。

  2. 复制下面的代码，粘贴到模板的 标签的前面。我这里只是选取了几个自己比较常用的 Brush（3.0.83 为目前最新版，下面引用的链接也是目前官网最新的，双击代码框中的空白区域可以复制源代码），全部可用的 Brushes 列表可以参考  http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/。

    <link href='https://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='https://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDjango.css' rel='stylesheet' type='text/css'/>
<script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shCore.js' type='text/javascript'/>
<script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushCss.js' type='text/javascript'/>
<script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='https://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

  3. 在编辑文章时，通过

    <pre class="brush: Brush aliases（此处填写代码对应的 Brush 别名）">
    此处添加需要高亮的代码
</pre>

    来实现代码高亮。例如如果是 HTML 代码，那么可以写成：

    <pre class="brush: html">
<body>
  <ul>
  <li><a href="#">Link1</a></li>
  <li><a href="#">Link2</a></li>
  <li><a href="#">Link3</a></li>
  <li><a href="#">Link4</a></li>
  <li><a href="#">Link5</a></li>
  </ul>
</body>
</pre>

    显示出来会是下面这样子：

    <body>
  <ul>
  <li><a href="#">Link1</a></li>
  <li><a href="#">Link2</a></li>
  <li><a href="#">Link3</a></li>
  <li><a href="#">Link4</a></li>
  <li><a href="#">Link5</a></li>
  </ul>
</body>

其实，总共有两种方式来激活代码高亮，一种是 <pre /> 的方式，还有一种是使用 <script /> 和 CDATA。

<pre /> 方式写起来简单些，而且适用于任何地方，比如 RSS 阅读器里也可以显示，但是有一点需要注意，就是必须要使用 HTML 转义字符（官方网站里说只有 < 需要），否则容易出错，常用的 HTML 转义字符有下面这几个：

  • ’ 写成 &apos;
  • " 写成 &quot;
  • & 写成 &amp;
  • < 写成 &lt;
  • > 写成 &gt;

虽然 <script /> 和 CDATA 的实现方式不需要使用转义字符，但是如果浏览器禁用了或者不能正确的解析 syntaxhighlighter script 代码那么整个代码可能就全看不到了，此种方式很容易出错而且适用范围没有 <pre /> 方式广，所以我推荐使用 <pre /> 的方式。

除了最基本的代码高亮，SyntaxHighlighter 还支持一些个性化的设置，比如代码高亮的主题样式，指定行的高亮，代码部分的折叠等等。详细的配置方式可以参考官网的说明： http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/。

2016-06-25 更新：发现一个小问题，默认的代码区域右侧会显示一个竖的滚动条，而其实并没有多余的代码行了，应该是样式文件造成的，可以找到所使用的主题的 css 文件，做如下更改：

.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  font-size: 1em !important;
}