从去年底开始重新使用 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;
}