はてなブログのシンタックスハイライトを色変えするよ
ブログにプログラミングのコードを表示し、コードの種類ごとに色をわけて表示する方法をシンタックスハイライトっていうらしいです。
テキストエディタで書いたようにブログに表示できるのがすごくかっこよくて憧れでしたね。
まずなんて調べたらいいのかわからず、ブログ コード 直接 表示 とかでググってましたけどはてな記法や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
デフォルトがこちら
※こちらは画像です
| 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; }
デフォルトと比べるとこんな感じです。
|
|
書いてて気づきましたが.synSpecialだけ色変えてなかった。
わかりやすいようにtableを横並びにして比較してみましたがentry-content～が長くて折り返しになってしまったので、そうならないように文字サイズを10pxにしました。
結果見づらくなったかもしれません。
そして2つのtableを横並びにするためにtableで囲ったんですけど、外枠のtableのborderを０にしても枠が消えないという。
table border="0"にしても消えないしstyle="border:none;"にしても消えない。
完璧を目指すときりがないので外枠はそのままにしておきますか。
というわけで今回ははてなブログのシンタックスハイライトの色をCSSを使って変更してきました。
もし配色を変えようと考えている方がいましたら是非ご紹介したブログを参考にしてみてください。
