错位效果图如下：

产生高亮代码错误的主要原因是：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;
}

解决后的效果如下：