为 Blogger 安装代码高亮插件 SyntaxHighlighter

@ Blogger 笔记

喜欢在博客上贴代码的同学应该都晓得 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 处理,否则,系统会运行代码,而不是显示出来。


评论