技术类

在没更换最新版本的ueditor编辑器之前就发现了，经过ueditor编辑器高亮渲染的代码，有错行的现象，现在更新到最新版本ueditor 1.2.6.1，依然存在这个问题，而且还发现，代码过长还会超出展示区域。想了想才给百度支付了网盟推广的费用没几天，之后遇上问题的各种说词，就不指望等百度更新了，都忙着收钱去了，还是自己来吧。

1）超出展示区域的现象如图：

这个问题最突出，影响整个页面的美感，一开始只是简单的加了个width样式，细节没太注意，后来才发现错行的现象。

2）错行的现象如下图：

第10行的代码因为过长，进行换行操作，但左侧的行号没法正确关联，导致从10行之后的行号都是错误的。

最后，还是趁着周末的时间，用Firefox的firebug调试了一下，完美解决了以上的问题。下边先给出修改后的效果，并简单说明要修改ueditor的地方。

要修改的文件就一个，就是ueditor的ueditor\third-party\SyntaxHighlighter\shCoreDefault.css样式文件，要修改的有三个地方：

1）.syntaxhighlighter td.code .line

.syntaxhighlighter td.code .line {
    padding: 0 1em !important;
}

改成

.syntaxhighlighter td.code .line {
    padding: 0 1em !important;
    white-space: nowrap;
}

2）.syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter, .syntaxhighlighter td, .syntaxhighlighter tr, .syntaxhighlighter tbody, .syntaxhighlighter thead, .syntaxhighlighter caption, .syntaxhighlighter textarea

.syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter,
 .syntaxhighlighter td, .syntaxhighlighter tr, .syntaxhighlighter tbody,
 .syntaxhighlighter thead, .syntaxhighlighter caption, .syntaxhighlighter textarea {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    border: 0 none !important;
    bottom: auto !important;
    float: none !important;
    font-family: Monaco,Menlo,Consolas,"Courier New",monospace;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: normal !important;
    left: auto !important;
    line-height: 1.1em !important;
    margin: 0 !important;
    min-height: inherit !important;
    outline: 0 none !important;
    overflow: visible !important;
    padding: 0 !important;
    position: static !important;
    right: auto !important;
    text-align: left !important;
    top: auto !important;
    vertical-align: baseline !important;
}

把overflow: visible !important;样式去掉。

3）.syntaxhighlighter td.code .container

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

改成

.syntaxhighlighter td.code .container {
    position: relative !important;
    width: 574px;
    overflow-x: auto;
}

其中，width的值要根据页面的排版来设定，磨途歌这里设置了574像素。

配置好后，再看看页面，又恢复了以往的简洁。