先放几个官网链接:
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; 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; }