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

シンタックスハイライトの色を変えたいので頑張ってみる。

まず、デフォルトのCSSがこれです。

/* SUPER PRE SYNTAX HIGHLIGHT */
.synSpecial { color: #c000c0; }
.synType { color: #3EC63E; }
.synComment { color: #4F80E5; }
.synPreProc { color: #9355E6; }
.synIdentifier { color: #51CFCF; }
.synConstant { color: #FF6666; }
.synStatement { color: #D88A17; }

わかりやすいように表にするとこんな感じ

Class	Hex	Color
.synSpecial	#c000c0
.synType	#3EC63E
.synComment	#4F80E5
.synPreProc	#9355E6
.synIdentifier	#51CFCF
.synConstant	#FF6666
.synStatement	#D88A17

これを Solarized Dark. - by Miguel Cervantes を参考にしながら変更します。

.entry-content pre.code {
    background-color: #002B36;
    color: #E0E2E4;
}
.synSpecial { color: #DC322F }
.synType { color: #B58900 }
.synComment { color: #7D8C93 }
.synPreProc { color: #B58900 }
.synIdentifier { color: #268BD2 }
.synConstant { color: #2AA198 }
.synStatement { color: #B58900 }

Class	Hex	Color
.synSpecial	#DC322F
.synType	#B58900
.synComment	#7D8C93
.synPreProc	#B58900
.synIdentifier	#268BD2
.synConstant	#2AA198
.synStatement	#B58900

結果…

source code

↑こんな感じになった！

素人趣味のWeb制作ブログ

素人趣味でやってるWeb制作とかプログラミングとかそっち系の話題についてのブログです。

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