为 Blogger 安装代码高亮插件 SyntaxHighlighter

2013. 11.12 16:10 / 900字 / 1,363阅 / 1评

第一步：添加代码
第二步：修改 css
- Sublime Text 样式
- Stack Overflow 样式
第三步：武装代码

喜欢在博客上贴代码的同学应该都晓得 SyntaxHighlighter，它让你的代码更有阅读性。虽然赛恩不常写技术文，但是作为一个文艺伪极客，还是喜欢包装一下代码。曾经用 pre/code 武装代码，但现在更有追求了，所以今天就来说一下如何在 Blogger 上安装 SyntaxHighlighter（只要有更改代码的权限，任何平台都适用）。

看得懂英文的同学可以参考 How do I add syntax highlighting to my Blogger blog?，图文并茂，浅显易懂。另外官网安装介绍也可以读一下。本篇将在此基础上按照国人思维稍微进行调整和扩充，并给出更丰富的主题样式修改代码。

第一步：添加代码

在 <header></header> 中间添加以下代码。

基本代码

<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/shBrushCss.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/shBrushXml.js' type='text/javascript'/>

本博只会用到 html、css 和 js，所以只加载了这三项。更多笔刷请看笔刷列表。

主题

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

访问主题列表查看更多选择。

运转代码

<script language='javascript' type='text/javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>

SyntaxHighlighter.config.bloggerMode = true; 适用于 Blogger，其他平台不需要添加这行代码。更多请参照这里。

最后把以上统合起来就变为：

<!-- Syntax Highlighter Additions START -->
<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/shBrushCss.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/shBrushXml.js' type='text/javascript'/>

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

<script language='javascript' type='text/javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>
<!-- Syntax Highlighter Additions END -->

第二步：修改 css

如果满意官方给出的主题，这步可以省略。如果爱折腾，就接着往下看吧。

Sublime Text 样式

注意：主题引用需要改为

<link type="text/css" rel="Stylesheet" href="/styles/shThemeFadeToGrey.css"/>

然后，添加以下代码到 <b:skin></b:skin> 之间（Blogger），或者 <style type='text/css'></style> 之间。

/* SyntaxHighlighter
----------------------------------------------------------------*/
.syntaxhighlighter {
 overflow-y: hidden!important;
}
.syntaxhighlighter .line.alt1 {
 background-color: #252525 !important;
}
.syntaxhighlighter .line.alt2 {
 background-color: #222222 !important;
}
.syntaxhighlighter .html.keyword, .syntaxhighlighter .html.plain, .syntaxhighlighter .html.plain a {
 color: #F13F78 !important;
}
.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
 color: #A5D52A !important;
}
.syntaxhighlighter .css.keyword {
 color: #43C8DA !important;
}
.syntaxhighlighter .value {
 color: #BE7CDD !important;
}
.syntaxhighlighter .css.plain, .syntaxhighlighter .css.plain a {
 color: #e3e658 !important;
}
.syntaxhighlighter div {
 line-height: 1.3em !important;
 font-size: 14px !important;
}
.syntaxhighlighter a:hover {
 text-decoration: underline;
}

Stack Overflow 样式

/* SyntaxHighlighter
----------------------------------------------------------------*/
.syntaxhighlighter {
 overflow-y: hidden!important;
}
.syntaxhighlighter .line.alt1 {
 background-color: #f8f8f8 !important;
}
.syntaxhighlighter .line.alt2 {
 background-color: #f8f8f8 !important;
}
.syntaxhighlighter .html.keyword, .syntaxhighlighter .html.plain, .syntaxhighlighter .html.plain a, .syntaxhighlighter .color3, .syntaxhighlighter .color3 a {
 color: #800000 !important;
}
.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
 color: #ff0000 !important;
}
.syntaxhighlighter .css.keyword {
 color: #00008b !important;
}
.syntaxhighlighter .value {
 color: #800000 !important;
}
.syntaxhighlighter .css.plain, .syntaxhighlighter .css.plain a {
 color: #000 !important;
}
.syntaxhighlighter div {
 line-height: 1.3em !important;
 font-size: 14px !important;
}
.syntaxhighlighter a:hover {
 text-decoration: underline;
}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
 color: #afafaf !important;
}
.syntaxhighlighter .gutter .line {
 border-right: 2px solid #ccc!important;
}
.syntaxhighlighter table td.code .line {
 padding: 0 .5em !important;
}
.syntaxhighlighter .string, .syntaxhighlighter .string a {
 color: #0000ff!important;
}
.syntaxhighlighter .toolbar {
 background: #eee !important;
}
.syntaxhighlighter .toolbar a:hover {
 color: #ccc !important;
}

第三步：武装代码

使用 <pre class="brush:xxx"></pre> 武装代码。xxx 表示笔刷名称（Brush aliases）。更多请参照笔刷名称列表。

注意：在 <pre class="brush:xxx"></pre> 之间的代码必须经过 Quick Escape 处理，否则，系统会运行代码，而不是显示出来。