小编上次解决了百度编辑器UEditor,使用代码语言时,前端没有语法高亮显示,及行号的问题.自解决完之后又发现语法高亮的CSS样式并没有自动换行,这样在不够宽的页面显示特别不友好.这次特意来修改一下.

首先要找到上次我们引入的语法高亮的CSS文件,文件名为:"shCoreDefault.css"

找到如下的代码:

.syntaxhighlighter {
    width: 100%!important;
    margin: .3em 0 .3em 0!important;
    position: relative!important;
    overflow: auto!important;
    background-color: #f5f5f5!important;
    border: 1px solid #ccc!important;
    border-radius: 4px!important;
    border-collapse: separate!important;
}

修改为:

.syntaxhighlighter {
    width: 100%!important;
    margin: .3em 0 .3em 0!important;
    position: relative!important;
    overflow: auto!important;
    background-color: #f5f5f5!important;
    border: 1px solid #ccc!important;
    border-radius: 4px!important;
    border-collapse: separate!important;
    word-break:break-all;
}

也就是添加了一行强制换行

word-break:break-all;

这样就OK了.到这里还没完,为什么?因为改成了自动换行,行号对齐问题随之而来,可以在本站搜索解决行号错位问题.