给富文本编辑后显示的时候在代码块上手动加上行号

页面真实的html代码是：

<code class="java hljs"></code>

当然你在外面遮罩一层div也行。

效果：【行号的空格是动态计算的，我这里最高使用了4位数，当然没那么夸张了，具体需要你自己调试，可能样式会有冲突，这个你也自己调试一下，js动态设置css所以没有单机版的演示】

<style>
    pre {
        position: relative;
        overflow: hidden;
    }
    code {
        display: block;
        padding: 12px 24px;
        background: #3f3f3f;
        overflow-y: auto;
        font-weight: 300;
    }
    .pre-numbering {
        position: absolute;
        top: 0;
        left: 0;
       /* width: 30px;*/
        padding-top: 8px;
        padding-right: 8px;
        padding-left: 2px;
        height: 100%;
        background-color: #3f3f3f;
        color: #efef8f;
    }
</style>

$('pre code').each(function(){
    var lines = $(this).text().split('\n').length;
    var $numbering = $('<ul/>').addClass('pre-numbering');
    $(this)
        .addClass('has-numbering')
        .parent()
        .append($numbering);
    var nbsplen = lines<10?"15px":(lines<100?"20px":(lines<1000?"25px":"30px"));
    $numbering.parent().find("code").css({marginLeft:nbsplen});
    $numbering.css({width:nbsplen});
    for(i=1;i<=lines;i++){
        var nbsp = lines<10?""
            :(lines<100?(i<10?" ":""):(lines<1000?(i<10?"  ":(i<100?" ":"")):""));
        $numbering.append($('<li/>').text(nbsp+i));
    }
});

页面生成完毕后的代码pre和code都是关键标签，