はてなのシンタックスハイライトに行番号をつける

追記:
2015/06/18 gistには行番号を追加しないようにした。 2014/07/03 1行のみかつシンタックスハイライト無しのpreでエラーがあった。

スーパーpre, markdownで表示したソースに行番号を表示する。

というかpreタグに行番号を表示させるだけなのでどこでも使えます。
olリストを追加するだけです。liの中にpreのそれぞれの行の内容を入れたほうが良いのかもしれませんが、DOM改変が多くなるのでしていません。

設置

管理 - デザイン　- カスタマイズから

「フッタ」にJSを追加
「デザインCSS」にCSS追加

CSSは適当にいじってください。背景色つけるとgist貼り付けっぽくなります

JS

<scirpt defer>
;(function(document){

var pres = document.getElementsByTagName("pre")

for(var i=pres.length; i--; ){
　var el = makeOl(pres[i])
  pres[i].appendChild(el)
}


function makeOl(pre){

  if (pre.className.indexOf("gist") !== -1) {
    return
  }

  var ol = document.createElement("ol")
    , li = document.createElement("li")
    , df = document.createDocumentFragment()
    , br = pre.innerHTML.match(/\n/g) || 0

  ol.className = "preLine"
  ol.setAttribute("role", "presentation")

  // no lang, no line-number
  if( pre.className && ! /lang-./.test(pre.className) ){
    br.length += 1
  }

  for(var i=br.length; i--; ){
    var li2 = li.cloneNode(true)
    df.appendChild(li2)
  }
  ol.appendChild(df)
  return ol
}

})(document)
</script>

CSS

※コメントがついているところはそのブログに応じて変える必要有り。

pre {
  position: relative;
  padding-left: 2.9em !important /* 2.3em */
}

.preLine{
  position: absolute;
  top: 20px; left: -.4em; /* top: 0; left: -.4em;*/
  font-style: oblique;
  opacity: .4
}

7cc@はてなブログ

JavaScriptとかとか

はてなのシンタックスハイライトに行番号をつける

設置

JS

CSS