关于syntaxhighlighter

syntaxhighlighter是一个代码高亮js插件，国内cdn：

http://libs.useso.com/js.php?path=SyntaxHighlighter

项目地址：http://alexgorbatchev.com/SyntaxHighlighter/

ueditor是支持该插件的，官方最新版是3.0.83，不过还存在一些bug，主要是Firefox里面的bug，我一直用chrome没发现，今天打开Firefox才发现这些bug。

BUGS

BUG1

垂直滚动栏会一直在火狐中显示，解决办法：

.syntaxhighlighter { /* hidden vertical scroll in firefox by hisune.com */
    overflow-y: hidden !important;
    overflow-x: auto !important;
}

BUG2

container容器与bootstrap冲突，解决办法：

.syntaxhighlighter table .container:before { /* conflict with bootstrap in firefox by hisune.com */
    display: none !important;
}

美化

然后我看到万年不变的syntaxhighlighter theme，萌生了美化syntaxhighlighter的想法，以下是代码：

.syntaxhighlighter{
    /*-webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;*/
    /*-moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 42px 0 0 #ececf0;*/
    /*box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;*/
    background-color: #f7f7f9!important;
    border: 1px solid #e1e1e8;
    border-radius: 4px;
    padding: 8px;
}
.syntaxhighlighter { /* hidden vertical scroll in firefox by hisune.com */
    overflow-y: hidden !important;
    overflow-x: auto !important;
}
.syntaxhighlighter table .container:before { /* conflict with bootstrap in firefox by hisune.com */
    display: none !important;
}
.syntaxhighlighter .gutter .line {
    border-right: 1px solid #eee!important;
}
/*.syntaxhighlighter .gutter .line.alt2,.syntaxhighlighter .gutter .line.alt1 {*/
    /*background-color: #fff!important;*/
/*}*/
.syntaxhighlighter .line.alt2, .syntaxhighlighter .line.alt1 {
    background-color: #f7f7f9!important;
}
.syntaxhighlighter .container .line:hover {
    background-color: #fff!important;
}

其中注释掉的代码其实更美观，但在代码只有一行的时候，左列td会错位，这个bug 我暂时无法解决。美化后的效果如本站所示。

如果您觉得您在我这里学到了新姿势，博主支持转载，姿势本身就是用来相互学习的。同时，本站文章如未注明均为 hisune 原创 请尊重劳动成果 转载请注明 转自: SyntaxHighlighter美化与火狐中的bug解决 - hisune.com