bootstrap和SyntaxHighlighter冲突

发布时间:2019-08-13 23:47:20.73编辑:佚名阅读(362)

错位效果图如下:

产生高亮代码错误的主要原因是:syntaxhighlighter 3.083版本 和 bootstrap有样式冲突的情况,他们都有一个class叫container。

解决办法有3种。

方案1:syntaxhighlighter样式shCoreXXX.css中的vertical-align:baseline给注释掉就好了

方案2:屏蔽syntaxhighlighter/styles/shCore.css 84行和bootstrap冲突的代码。注释一下代码

.syntaxhighlighter table td.code .container {
  position: relative !important;
}

方案3:根本原因是与bootstrap的.container样式冲突,如下位置是bootstrap的定义:

.clearfix::before, 
...,.container::before, 
.container::after, ..., 
.modal-footer::before, 
.modal-footer::after {
    content: " ";
    display: table;
}

就是这个display: table;属性导致的,重写一个 syntaxhighlighter的container样式覆盖它就行了:

.syntaxhighlighter td.code .container::before, .syntaxhighlighter td.code .container::after {
    display: none;
}

解决后的效果如下:


  关键字:bootstrapSyntaxHighlighter冲突错位


鼓掌

0

正能量

0

0

呵呵

0


评论区