読者です 読者をやめる 読者になる 読者になる

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

はてな gist

やりたいこと

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

  1. シマシマの背景を使用したい
  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;
}
行番号を表示したい

BloggerTumblrだとあるんだけど、はてなダイアリだと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記法を使ってみる。はてなブログの新記法

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