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

僕の世界観を変えてみる

比較的簡単なHTMLでWebサイトを作ってみるのでその過程を綴っていいたいと思っています。

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

f:id:htmllifehack:20161028222619j:plain


ブログにプログラミングのコードを表示し、コードの種類ごとに色をわけて表示する方法をシンタックスハイライトっていうらしいです。
テキストエディタで書いたようにブログに表示できるのがすごくかっこよくて憧れでしたね。
まずなんて調べたらいいのかわからず、ブログ コード 直接 表示 とかでググってましたけどはてな記法やmarkdownを使えば簡単にできるということがわかりました。
はてなブログでやるときは上記2つが簡単かなあと思います。

ちなみに僕が一番憧れていたのはSyntaxHighlighterです。
www.netyasun.com
まあ重いといわれています。
そこでSyntaxHighlighterの代わりになってかつ軽いものということでHightlighter.jsがあります。
syncer.jp

どちらもはてなブログで使うことはできるようですがなんかめんどくさそうだったので辞めました。
他にはGitHubのGistとかでもできるようです。
興味がある方はググってみてください。


さて今回ははてな記法でできるシンタックスハイライト機能スーパーPre記法ですが、こちらのソースコードの色を変更していきたいと思います。

シンタックスハイライトの配色を変更するためのCSSを追加する

ソースを表示して一つ一つ変更していきましたがどうしてもbackgroundの色だけ変更できなくて苦戦しました。
.entry-content pre { でbackground-colorを指定したんですけどできなかったので最終的に諦めてググってみたら最後に.codeをつけ足さないといけないみたいです。
参考にさせていただいたブログです。
studyprograming.hatenablog.com

あとどこを変えると何色になるのかわかるように表にまとめてくださっているブログを発見したのでこちらも参考にどうぞ。
kerotaa.hateblo.jp
デフォルトがこちら
f:id:htmllifehack:20161029013741j:plain
※こちらは画像です

Class Hex Color
.entry-content pre.code #FFFFFF
.synSpecial #c000c0
.synType #3EC63E
.synComment #4F80E5
.synPreProc #9355E6
.synIdentifier #51CFCF
.synConstant #FF6666
.synStatement #D88A17

背景が白くて個人的に見えづらいなあと感じたのでブログのテーマに合う色に変更しようと思います。

/*シンタックスハイライト*/
.entry-content pre.code { background-color:#353848; color:#FFF9B1; font-size:13px; }            
.synSpecial    { font-size:13px; color:; }
.synType       { font-size:13px;  color:#b3ce5b; }
.synComment    { font-size:13px;  color:#e8e6f3; }
.synPreProc    { font-size:13px;  color:#a199c8; }
.synIdentifier { font-size:13px;  color:#afd0ef; }
.synConstant   { font-size:13px;  color:#dd9cb4; }
.synStatement  { font-size:13px;  color:#ebc061; }

デフォルトと比べるとこんな感じです。


Class Hex Color
.entry-content pre.code #FFFFFF
.synSpecial #c000c0
.synType #3EC63E
.synComment #4F80E5
.synPreProc #9355E6
.synIdentifier #51CFCF
.synConstant #FF6666
.synStatement #D88A17

Class Hex Color
.entry-content pre.code #353848
.synSpecial #c000c0
.synType #b3ce5b
.synComment #e8e6f3
.synPreProc #a199c8
.synIdentifier #afd0ef
.synConstant #dd9cb4
.synStatement #ebc061


書いてて気づきましたが.synSpecialだけ色変えてなかった。
わかりやすいようにtableを横並びにして比較してみましたがentry-content~が長くて折り返しになってしまったので、そうならないように文字サイズを10pxにしました。
結果見づらくなったかもしれません。
そして2つのtableを横並びにするためにtableで囲ったんですけど、外枠のtableのborderを0にしても枠が消えないという。
table border="0"にしても消えないしstyle="border:none;"にしても消えない。
完璧を目指すときりがないので外枠はそのままにしておきますか。
というわけで今回ははてなブログのシンタックスハイライトの色をCSSを使って変更してきました。
もし配色を変えようと考えている方がいましたら是非ご紹介したブログを参考にしてみてください。