はてなブログのコードに行番号をつける

JavaScript

• jQueryに依存

$(function(){
    var tags = $("pre")
    for(i = 0; i < tags.length; i++){
        var code_tag = $("pre").eq(i)
        var code_tag_html = code_tag.html()
        var code_html_ary = code_tag_html.match(/.*\n/g)
        for(j = 0; j < code_html_ary.length; j++){
            code_html_ary[j] = `<code>${code_html_ary[j].replace(/\r?\n/g,"")}</code>\n`
        }
        code_tag.html(code_html_ary.join(""))
    }
})

CSS

pre code{
    counter-increment: linenumber;
}

pre > code::before {
    content: counter(linenumber);
    width: 32px;
    display: inline-block;
    text-align: right;
    margin-right: 16px;
    font-weight: bold;
}