はてなブログのシンタックスハイライトを変更する

はじめに

はてなブログにソースコードを載せた時、
今使っているテーマは個人的に少し見にくいと感じていました。

過去記事のシンタックスハイライト⬇︎

普段使っているエディタが背景グレーなのでそのせいもあるかもしれません。

自分で見返してて見にくいと感じたので、
シンタックスハイライトの配色を変更してみようと思います。

変更の仕方

はてなブログのダッシュボードから
"デザイン"→"カスタマイズ"→"デザインCSS"から変更できるそうです。

CSS作成

CSSジェネレータをお借りしました

調べてみると、はてなブログシンタックスハイライトの
CSSジェネレータというwebアプリがありました。

プレビューしながらCSSの作成ができるようです。

感謝しつつ使用させてもらいます。

はてなブログシンタックスハイライト CSS ジェネレータ

使ってみる。

デフォルトの配色から、backgroundとsynConstant,SynTypeを変更しています。 使いながら調整していきましょう。

.entry-content pre.code {
    background-color: #2E2E2E;
    color: #ffffff;
}
.synComment { color: #6272a4; }
.synConstant { color: #ffff14; }
.synIdentifier { color: #58ACFA; }
.synPreProc { color: #a199c8; }
.synSpecial { color: #c000c0; }
.synStatement { color: #50fa7b; }
.synType { color: #ff1493; }

おわりに

背景が黒系になってだいぶ見やすくなった気がします。