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

藻ログ

都会でOLをしています

はてなブログのソースコード表示を変更する

murmur

はてな記法シンタックスハイライト

はてなブログのコード展開記法はとても便利なのですが,
ブログデザインに合わせて字を小さくしたかったり背景色を変えたいときがあります.
[はてな記法]ソースコードを色付けして表示する(シンタックスハイライト) - はてなブログ ヘルプ

カスタムcss

デザイン > カスタマイズ > デザインCSS

を編集し,シンタックスハイライト用のクラススタイルを上書きします.
今回は字を少し小さくして,solarizedに寄せました.

.entry-content pre.code {
    font-size: 12px;
    background-color: #002B36;
    color: #cccccc;
}
.entry-content .synSpecial { color: #dc322f }
.entry-content .synType { color: #b58900 }
.entry-content .synComment { color: #657b83}
.entry-content .synPreProc { color: #cb4b16 }
.entry-content .synIdentifier { color: #268bd2 }
.entry-content .synConstant { color: #2aa198 }
.entry-content .synStatement { color: #859900 }

.entry-content code {
    font-size: 12px;
    background-color: #002B36;
    color: #cccccc;
}

色見本

自分用メモ.

bgcolor code .synSpecial .synType .synComment .synPreProc .synIdentifier .synConstant .synStatement
#222222 #f8f8f2 #e6db74 #66d9ef #75715e #f92672 #a6e22e #cfcfc3 #FA9631
#122733 #93a1a1 #dc322f #b58900 #657b83 #cb4b16 #268bd2 #2aa198 #859900