参考这里 http://idodev.co.uk/2013/03/syntax-highlighting-with-highlightjs/

 

添加jquery代码

//numbering for pre>code blocks
$(function(){
    $('pre code').each(function(){
        var lines = $(this).text().split('\n').length - 1;
        var $numbering = $('
    ').addClass('pre-numbering'); $(this) .addClass('has-numbering') .parent() .append($numbering); for(i=1;i<=lines;i++){ $numbering.append($('
  • ').text(i)); } $('.pre-numbering li').css("height",$('pre code').height()/lines); }); });

添加css

 

pre {
    position: relative;
    margin-bottom: 24px;
    border-radius: 3px;
    border: 1px solid #C3CCD0;
    background: #FFF;
    overflow: hidden;
	padding:0px;
}

code {
  display: block;
  padding: 12px 24px;
  overflow-y: auto;
  font-weight: 300;
  font-family: Menlo, monospace;
  font-size: 0.8em;
}

code.has-numbering {
    margin-left: 21px;
}

.pre-numbering {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    padding: 12px 2px 12px 0;
    border-right: 1px solid #C3CCD0;
    border-radius: 3px 0 0 3px;
    background-color: #EEE;
    text-align: right;
    font-family: Menlo, monospace;
    font-size: 0.8em;
    color: #AAA;
}

对齐的地方就是$('.pre-numbering li').css("height",$('pre code').height()/lines); 基本对齐,处女座人士使用无效!!!

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

et_highlighter