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

素人趣味のWeb制作ブログ

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

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

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

はてなブログ CSS

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

まず、デフォルトの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

↑こんな感じになった!