SyntaxHighlighter 和 Bootstrap 引起的样式错位问题

icaohongyuan

于 2019-02-02 10:38:13 发布

阅读量378

点赞数

分类专栏： HTML 文章标签：代码样式错位 UEditior SyntaxHighlighter

本文链接：https://blog.youkuaiyun.com/hongyuancao/article/details/86747274

版权

HTML 专栏收录该内容

4 篇文章

订阅专栏

本文详细记录了在使用UEditor富文本编辑器时遇到的代码高亮错位问题及其解决过程。问题源于UEditor的代码高亮工具SyntaxHighlighter与前端框架Bootstrap中的container类名冲突，最终通过重写特定CSS样式得以解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在自己搭建自己的博客的时候，用的百度的富文本UEditior，在做代码高亮的时候，无论怎么调试都是代码和行号错位，真的是闹心。如下图：

这个问题真的是消耗了我很多时间，最后终于找到了原因。

我在搭建博客的时候，用的是Bootstrap来做的前端，有一个叫做container的class，而UEditor中利用的代码高亮工具SyntaxHighlighter也有一个叫做container的class。这样导致样式冲突，这个就是导致代码和行号错位的原因（我用的谷歌浏览器，别的浏览器不清楚）。

知道根本原因就好弄了，重写下SyntaxHighlighter的container的样式覆盖一下：

    <style>
        .syntaxhighlighter td.code .container::before,
        .syntaxhighlighter td.code .container::after {
            display: none;
        }
    </style>

然后就搞定了。如下：