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

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

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

カスタムcss

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

を編集し，シンタックスハイライト用のクラススタイルを上書きします.

solalized dark

.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;
}

custom light

.entry-content pre.code {
    font-size: 12px;
    background-color: #F5F2F0;
    color: #DD1144D;
}
.entry-content .synSpecial { color: #0066cc }
.entry-content .synType { color: #cc4455 }
.entry-content .synComment { color: #7f7e7a }
.entry-content .synPreProc { color: #0177AA }
.entry-content .synIdentifier { color: #EE9900 }
.entry-content .synConstant { color: #ccaa00 }
.entry-content .synStatement { color: #008080 }

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

色見本

自分用メモ．

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