はてなダイアリへ埋め込むGistのスタイルを変えて、行番号を表示させる。

やりたいこと

やりたいことは、以下の2つ。

シマシマの背景を使用したい
行番号を表示したい

Gistのソースを埋め込むとこんな感じになる。

はてなのコード記法スーパーpre記法 + CSSのカスタマイズだとこういう風に表示できる。

Gistの埋め込みコードを、はてなのコード記法スーパーpre記法な感じにしたい。

試したこと

シマシマの背景を使用したい

はてなダイアリーに埋め込んだ Gist のスタイルを変える
これを参考にbackgroundが変えられないかと思って、以下を設定してみたが変わらなかった。

div.section .gist .gist-file .gist-data pre {
    background: url('http://dl.dropbox.com/u/645223/hatena_CSS/code.png') left top repeat-y;
}

行番号を表示したい

BloggerやTumblrだとあるんだけど、はてなダイアリだとJavascript使えんないから、この方法はダメそうだ。

わからねーなと思って諦めかけたら、.gist-highlight なんてのがあった。
https://gist.github.com/stylesheets/gist/embed.css

        .gist .gist-file .gist-data .gist-highlight {
          background: transparent !important;
        }

はてなダイアリでいじってるのも、div.day pre.syntax-highlightなので、これを変更してみた。

div.section .gist .gist-file .gist-data .gist-highlight {
    padding:0px;
    padding-left: 50px;
    line-height: 20px;
    background: url('http://dl.dropbox.com/u/645223/hatena_CSS/code.png') left top repeat-y !important;
    border-bottom: 1px solid #CCEEDD;
    border-right: 1px solid #CCEEDD;
    border-top-width:0;
    border-left-width:0;
    white-space: pre-wrap;
}

変更後の結果

成功！！
途中で改行がされないから、スーパーpre記法よりも、こっちの方がいいや。

おまけ

ぐぐってたら、はてなブログだとgist記法なんてものがあった。
はてなブログでgist記法を使ってみる。
はてなブログの新記法

はてなブログの記法一覧ってどこにあるんだろう。。。