之前在 在痞客邦使用 SyntaxHighlighter 為程式碼上色 這篇文章提到如何使用,但在實際使用了一段時間之後就發現到一個問題:

 

overflow的捲軸顯示不正常,尤其是在只有一行的程式碼時。

在不同瀏覽器下有不同的情況,例如:

IE7: 高度少一行,所以只有一行又有捲軸時,區塊剩下捲軸,看不到程式碼。

IE8: 只有一行時,該有捲軸卻沒有。(早期的Firefox版本也有,現在已經沒有了)

Chrome和Safari: 垂直卷軸一直存在。

總之有很多問題,在花了不少時間研究之後,終於改出了一個稍微正常的版本,在Firefox、Chrome和Safari實測看起來都正常,但是IE8單行仍然不是很正常,但勉強可用;IE7單行時正常,但多行時仍然會少一行而出現垂直卷軸。

除此之外,將關於的按鈕移到左邊,不會擋住程式碼。

修改shCoreDefault.css的部分程式碼如下:

.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;
  /* modified by emn178 */
  line-height: 1.13em !important;
  /* modified by emn178 */
  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: 1em !important;
  min-height: inherit !important;
  min-height: auto !important;
}
.syntaxhighlighter .toolbar {
  position: absolute !important;
  /* modified by emn178 */
  /*right: 1px !important;*/
  /* modified by emn178 */
  top: 1px !important;
  width: 11px !important;
  height: 11px !important;
  font-size: 10px !important;
  z-index: 10 !important;
}

另外針對IE8以下的版本額外使用另外的CSS,並透過條件式註解額外引用:

.syntaxhighlighter {
  min-height:33px !important;	/* IE 8 */
  *min-height:34px !important;	/* IE 7 */
}

其他樣式也可以依這個方式修改。

這邊提供修改過的shCoreDefault.css:

http://in2.csie.ncu.edu.tw/~emn178/ref/syntaxhighlighter_3.0.83/styles/shCoreDefault.css

http://in2.csie.ncu.edu.tw/~emn178/ref/syntaxhighlighter_3.0.83/styles/ie.css

可以直接將css引用改成下面這個

<link type="text/css" rel="stylesheet" href="http://in2.csie.ncu.edu.tw/~emn178/ref/syntaxhighlighter_3.0.83/styles/shCoreDefault.css"/>
<!--[if lte IE 8]>
<link type="text/css" rel="stylesheet" href="http://in2.csie.ncu.edu.tw/~emn178/ref/syntaxhighlighter_3.0.83/styles/ie.css"/>
<![endif]-->
文章標籤
創作者介紹

小殘的程式光廊

emn178 發表在 痞客邦 PIXNET 留言(0) 人氣()