先放几个官网链接:
demo:http://alexgorbatchev.com/SyntaxHighlighter/manual/demo/ 使用说明(适合自己搭的博客):http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html themes:http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/ brushes:http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ 下载(3.0.83):http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_current
我的博客园后台编辑器用过TinyMCE(现在用的)和MarkDown,在两者编辑好的文章中插入syntaxHighlighter节点,样式都会跟官网提供的有很大出入,目测最大的问题是line-height和font-size被覆盖。我稍微调试了下发现,如果用我前头那篇随笔里的方法进行编辑的话,新导入的css和js文件都是插在标签里,而不是,这就导致了我新加的css优先级被降低或者说不能加载全。我这儿重新说下正确的在博客园里使用的步骤:
1. 先下载,解压后目录如下。其中compass的css和scripts里的shCore.js是混淆过的,其他都是源码。styles和compass里有所有的brush和theme的js和css,到时候要用哪个就上传哪个到博客园文件列表里,我全部上传了
2. head里引用css。将shCore.css和shThemeDefault.css的源码或者混淆后的代码复制到后台“页面定制CSS代码”。这里的配置对应在页面里是head中的
<link type="text/css" rel="stylesheet" href="/blog/customcss/106912.css?v=%2fE9aIm8zFWP85YA0vZcDoHMyNl4%3d">
3. 添加shCore.js以及你需要的brush对应的js文件引用到“页首Html代码”,这里是我的
<script src="http://files.cnblogs.com/timelyxyz/shCore.js" type="text/javascript"></script> <script src="http://files.cnblogs.com/timelyxyz/shBrushJScript.js" type="text/javascript"></script> <script src="http://files.cnblogs.com/timelyxyz/shBrushXml.js" type="text/javascript"></script> <script src="http://files.cnblogs.com/timelyxyz/shBrushJava.js" type="text/javascript"></script> <script src="http://files.cnblogs.com/timelyxyz/shBrushBash.js" type="text/javascript"></script>
4. 调用SyntaxHighlighter的js方法,生成样式。
<script type="text/javascript"> SyntaxHighlighter.all() </script>
5. 现在开始纠正样式错乱问题。在“页面定制CSS代码”区域的最顶部,添加下面几个样式声明,用于消除网站原有的同名css的影响。另外,这段之后就是我们在第一步添加的shCore.css和shThemeDefault.css的代码。by the way, 1.5em是我个人的选择,这个行距我看的比较舒服。
shCore.css的第一个样式声明需要修改行高和字号,我分别选择了1.5em和13px,跟上面的选择保持一致就好。下面是在“页面定制CSS代码”里修改过的代码,其他的还是按照第一步的来
.container textarea{line-height: 1.5em!important;}
.syntaxhighlighter .line {line-height: 1.5em!important; }
.syntaxhighlighter code{line-height:1.5em !important; white-space: inherit;}
/**
* 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.5em !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-weight: normal !important;
font-style: normal !important;
font-size: 13px !important;
min-height: inherit !important;
min-height: auto !important;
}