はてなブログのシンタックスハイライトの色を変更する
シンタックスハイライトの色を変えたいので頑張ってみる。
まず、デフォルトの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 |
結果…
↑こんな感じになった!