修改并上传SyntaxHighlighter源码个性化博客代码风格

或许是我太苛刻了，用了博客园默认的SyntaxHighlighter工具高亮代码后，总不尽人意。首先是行间距太大，这对于只贴小量的代码没什么问题。但如果代码很长，将会很大程度上影响阅读效率。其次，博客园似乎修改了SyntaxHighlighter原版代码不能自动换行的问题，但改得不彻底，又引出了新的问题：自动换行后会导致行号不连惯，并且产生多行注释时的Bug。

但也有改的好的地方，比如字体比原来默认的漂亮多了，高亮的颜色也更加符合阅读习惯，还有就是给代码的行加上了两种不同的背景色，交替显示，这都让代码看起来舒爽了很多。

最后，我还是决定自己动手，查找资料，上传并修改SyntaxHighlighter源码，基本上达到了预期的目标。

1.下载并修改SyntaxHighlighter源码

1.1下载SyntaxHighlighter

可到http://alexgorbatchev.com/SyntaxHighlighter/下载SyntaxHighlighter。我下的是8.0.83版本。

1.2 修改源码

找到styles/shCoreDefault.css文件，按照如下方式修改:

/*** SyntaxHighlighter* http://alexgorbatchev.com/SyntaxHighlighter** SyntaxHighlighter is donationware. If you are using it, please donate.* http://alexgorbatchev.com/SyntaxHighlighter/donate.html** @version* 3.0.83 (July 02 2010)* * @copyright* Copyright (C) 2004-2010 Alex Gorbatchev.** @license* Dual licensed under the MIT and GPL licenses.*/
.syntaxhighlighter a,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody,
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea {-moz-border-radius: 0 0 0 0 !important;-webkit-border-radius: 0 0 0 0 !important;background: none !important;border: 0 !important;bottom: auto !important;float: none !important;height: auto !important;left: auto !important;/* 修改行间距 *//* line-height: 1.1em !important; */line-height: 1.2em !important;margin: 0 !important;outline: 0 !important;overflow: visible !important;padding: 0 !important;position: static !important;right: auto !important;text-align: left !important;top: auto !important;vertical-align: baseline !important;width: auto !important;box-sizing: content-box !important;/* 修改字体类型 *//* font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; */font-family: "新宋体", Courier, monospace !important;font-weight: normal !important;font-style: normal !important;/* 修改字体大小 *//* font-size: 1em !important; */font-size: 13px !important;min-height: inherit !important;min-height: auto !important;
}.syntaxhighlighter {width: 100% !important;margin: 1em 0 1em 0 !important;position: relative !important;overflow: auto !important;/* 修改字体大小，此处没明显效果 *//* font-size: 1em !important; */font-size: 13px !important;
}
.syntaxhighlighter.source {overflow: hidden !important;
}
.syntaxhighlighter .bold {font-weight: bold !important;
}
.syntaxhighlighter .italic {font-style: italic !important;
}
.syntaxhighlighter .line {white-space: pre !important;
}
.syntaxhighlighter table {width: 100% !important;/* 给代码加个框框 */border: 1px solid #7FFFD4 !important;
}
.syntaxhighlighter table caption {text-align: left !important;padding: .5em 0 0.5em 1em !important;
}
.syntaxhighlighter table td.code {width: 100% !important;
}
.syntaxhighlighter table td.code .container {position: relative !important;
}
.syntaxhighlighter table td.code .container textarea {box-sizing: border-box !important;position: absolute !important;left: 0 !important;top: 0 !important;width: 100% !important;height: 100% !important;border: none !important;background: white !important;padding-left: 1em !important;overflow: hidden !important;white-space: pre !important;
}
.syntaxhighlighter table td.gutter .line {text-align: right !important;padding: 0 0.5em 0 1em !important;
}
.syntaxhighlighter table td.code .line {padding: 0 1em !important;
}
.syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line {padding-left: 0em !important;
}
.syntaxhighlighter.show {display: block !important;
}
.syntaxhighlighter.collapsed table {display: none !important;
}
.syntaxhighlighter.collapsed .toolbar {padding: 0.1em 0.8em 0em 0.8em !important;font-size: 1em !important;position: static !important;width: auto !important;height: auto !important;
}
.syntaxhighlighter.collapsed .toolbar span {display: inline !important;margin-right: 1em !important;
}
.syntaxhighlighter.collapsed .toolbar span a {padding: 0 !important;display: none !important;
}
.syntaxhighlighter.collapsed .toolbar span a.expandSource {display: inline !important;
}
.syntaxhighlighter .toolbar {position: absolute !important;right: 1px !important;top: 1px !important;width: 11px !important;height: 11px !important;font-size: 10px !important;z-index: 10 !important;
}
.syntaxhighlighter .toolbar span.title {display: inline !important;
}
.syntaxhighlighter .toolbar a {display: block !important;text-align: center !important;text-decoration: none !important;padding-top: 1px !important;
}
.syntaxhighlighter .toolbar a.expandSource {display: none !important;
}
.syntaxhighlighter.ie {font-size: .9em !important;padding: 1px 0 1px 0 !important;
}
.syntaxhighlighter.ie .toolbar {line-height: 8px !important;
}
.syntaxhighlighter.ie .toolbar a {padding-top: 0px !important;
}
.syntaxhighlighter.printing .line.alt1 .content,
.syntaxhighlighter.printing .line.alt2 .content,
.syntaxhighlighter.printing .line.highlighted .number,
.syntaxhighlighter.printing .line.highlighted.alt1 .content,
.syntaxhighlighter.printing .line.highlighted.alt2 .content {background: none !important;
}
.syntaxhighlighter.printing .line .number {color: #bbbbbb !important;
}
.syntaxhighlighter.printing .line .content {color: black !important;
}
.syntaxhighlighter.printing .toolbar {display: none !important;
}
.syntaxhighlighter.printing a {text-decoration: none !important;
}
.syntaxhighlighter.printing .plain, .syntaxhighlighter.printing .plain a {color: black !important;
}
.syntaxhighlighter.printing .comments, .syntaxhighlighter.printing .comments a {color: #008200 !important;
}
.syntaxhighlighter.printing .string, .syntaxhighlighter.printing .string a {color: blue !important;
}
.syntaxhighlighter.printing .keyword {color: #006699 !important;font-weight: bold !important;
}
.syntaxhighlighter.printing .preprocessor {color: gray !important;
}
.syntaxhighlighter.printing .variable {color: #aa7700 !important;
}
.syntaxhighlighter.printing .value {color: #009900 !important;
}
.syntaxhighlighter.printing .functions {color: #ff1493 !important;
}
.syntaxhighlighter.printing .constants {color: #0066cc !important;
}
.syntaxhighlighter.printing .script {font-weight: bold !important;
}
.syntaxhighlighter.printing .color1, .syntaxhighlighter.printing .color1 a {color: gray !important;
}
.syntaxhighlighter.printing .color2, .syntaxhighlighter.printing .color2 a {color: #ff1493 !important;
}
.syntaxhighlighter.printing .color3, .syntaxhighlighter.printing .color3 a {color: red !important;
}
.syntaxhighlighter.printing .break, .syntaxhighlighter.printing .break a {color: black !important;
}.syntaxhighlighter {background-color: white !important;
}
.syntaxhighlighter .line.alt1 {/* 行颜色交替变换显示设置，与下面的alt2配合 *//* background-color: white !important; */background-color: #f8f8f8 !important;
}
.syntaxhighlighter .line.alt2 {background-color: white !important;
}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {background-color: #e0e0e0 !important;
}
.syntaxhighlighter .line.highlighted.number {color: black !important;
}
.syntaxhighlighter table caption {color: black !important;
}
.syntaxhighlighter .gutter {color: #afafaf !important;
}
.syntaxhighlighter .gutter .line {border-right: 3px solid #6ce26c !important;
}
.syntaxhighlighter .gutter .line.highlighted {background-color: #6ce26c !important;color: white !important;
}
.syntaxhighlighter.printing .line .content {border: none !important;
}
.syntaxhighlighter.collapsed {overflow: visible !important;
}
.syntaxhighlighter.collapsed .toolbar {color: blue !important;background: white !important;border: 1px solid #6ce26c !important;
}
.syntaxhighlighter.collapsed .toolbar a {color: blue !important;
}
.syntaxhighlighter.collapsed .toolbar a:hover {color: red !important;
}
.syntaxhighlighter .toolbar {/* 去掉右上角的小问号(2-1),应根据行交替显示的颜色设置该选项 *//* color: white !important; *//* background: #6ce26c !important; */color: white !important;background: white !important;border: none !important;
}
.syntaxhighlighter .toolbar a {/* 2-2去掉右上角的小问号(2-2) *//* color: white !important; */color:white !important;
}
.syntaxhighlighter .toolbar a:hover {color: black !important;
}
.syntaxhighlighter .plain, .syntaxhighlighter .plain a {color: black !important;
}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {color: #008200 !important;
}
.syntaxhighlighter .string, .syntaxhighlighter .string a {/* 修改字符串值的颜色 *//* color: blue !important; */color: #a31414 !important;
}
.syntaxhighlighter .keyword {/* 修改关键字的颜色 *//* color: #006699 !important; */color: blue !important;
}
.syntaxhighlighter .preprocessor {/* 修改预处理的颜色 *//* color: gray !important; */color: #02027e !important;
}
.syntaxhighlighter .variable {color: #aa7700 !important;
}
.syntaxhighlighter .value {color: #009900 !important;
}
.syntaxhighlighter .functions {/* 禁止系统函数加粗显示 */font-weight: normal !important; color: #ff1493 !important;
}
.syntaxhighlighter .constants {color: #0066cc !important;
}
.syntaxhighlighter .script {font-weight: bold !important;color: #006699 !important;background-color: none !important;
}
.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {/* 禁止数据类型加粗显示 */font-weight: normal !important; /* 修改数据类型的颜色 *//* color: gray !important; */color: #a300a3 !important;
}
.syntaxhighlighter .color2, .syntaxhighlighter .color2 a {color: #ff1493 !important;
}
.syntaxhighlighter .color3, .syntaxhighlighter .color3 a {color: red !important;
}.syntaxhighlighter .keyword {/* 取消关键字加粗显示 *//* font-weight: bold !important; */font-weight: normal !important;
}

这里并没有添加自动换行的功能，暂时先在写博客时手动调整一下单行代码的长度，别越界就OK了。

2.上传源码并在Blog中设置

2.1上传文件

需要上传两种类型的文件：

css文件，将刚刚修改好的shCoreDefault.css上传即可。
js文件，shCore.js是必传的，另外再可以有选择性的上传你需要的文件。比如我常用C++，偶尔用css，那么就可以只上传shBrushCpp.js和shBrushCss.js两个文件。当然，也可以全部js文件都传上去。

如图(我只上传了部分文件)：

2.2 设置Blog.

这一步的主要目的是在合适的位置添加合适的源码，使你刚刚上传的源码文件发挥作用。你需要在博客园-->设置-->子标题中添加如图所示代码：

全部代码为：

<script type="text/javascript"
src="http://files.cnblogs.com/chinaxmly/shCore.js"></script>
<script type="text/javascript"
src="http://files.cnblogs.com/chinaxmly/shBrushCpp.js"></script>
<script type="text/javascript"
src="http://files.cnblogs.com/chinaxmly/shBrushCss.js"></script>
<script type="text/javascript"
src="http://files.cnblogs.com/chinaxmly/shBrushXml.js"></script>
<script type="text/javascript"
src="http://files.cnblogs.com/chinaxmly/shBrushJScript.js"></script>
<link type="text/css" rel="stylesheet"
href="http://files.cnblogs.com/chinaxmly/shCoreDefault.css"/>
<script type="text/javascript">SyntaxHighlighter.config.strings.help = "";SyntaxHighlighter.config.strings.expandSource = "+ 查看代码";SyntaxHighlighter.all();
</script>

说明：

herf和src的值为你的博客地址加文件名称。
“SyntaxHighlighter.config.strings.help = “”;”这句话用于去掉代码右上角的小‘？’号。

3. 个性化代码风格

将你的代码包含在如下的<pre></pre>标签中即可：

<pre class="brush: cpp; highlight: [12, 15]; first-line: 10; html-script: false; light: false; auto-links: false; collapse: true; class-name: 'class_name_demo';">
// 你的代码
</pre>

最终的效果如下所示（C++）：

// 程序初始化仿真#define TRUE 1
#define FALSE 0typedef char*            LPSTR;
typedef const char*     LPCSTR;#include &lt;iostream&gt;using namespace std;///
// Window message map handling
struct AFX_MSGMAP_ENTRY;    // declared below after CWndstruct AFX_MSGMAP
{AFX_MSGMAP* pBaseMessageMap;AFX_MSGMAP_ENTRY* lpEntries;
};// DECLARE_MESSAGE_MAP
#define DECLARE_MESSAGE_MAP()                                                   \static AFX_MSGMAP_ENTRY _messageEntries[];                                 \static AFX_MSGMAP      messageMap;                                         \virtual AFX_MSGMAP* GetMessageMap() const;/* 多行代码示例 */
class CFrameWnd : public CWnd uuuuuuuuuuuuuuuuuuuuuyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyiuojfosfejosifoefsfijsojuosfa;fslfjeosjfoaifjeojsosjfessfeoij
{
public:    CFrameWnd() { }~CFrameWnd() { }virtual BOOL Create();virtual BOOL PreCreateWindow();
};/*  单行注释 *//*
* 多行注释
*/class CView : public CWnd
{
public:CView() { }~CView() { }
};BOOL CWnd::CreateEx()
{int x = 7;x++;char* = "Hello World.";PreCreateWindow();// 系统函数ps1 = (char *)malloc(10); // 在堆区分配10个字节ps2 = (char *)malloc(20); // 在堆区分配20个字节return TRUE;
}

转载于:https://www.cnblogs.com/chinaxmly/archive/2012/09/27/2706359.html