SyntaxHighlighter在博客园中的样式错乱问题

先放几个官网链接:

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="https://files.cnblogs.com/timelyxyz/shCore.js" type="text/javascript"></script>
<script src="https://files.cnblogs.com/timelyxyz/shBrushJScript.js" type="text/javascript"></script>
<script src="https://files.cnblogs.com/timelyxyz/shBrushXml.js" type="text/javascript"></script>
<script src="https://files.cnblogs.com/timelyxyz/shBrushJava.js" type="text/javascript"></script>
<script src="https://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;
}

posted on 2014-03-30 13:12  timelyxyz  阅读(390)  评论(0编辑  收藏  举报

导航