Google Chrome のソースビューアを Komodo Edit(Dark Chalkboard)風にするカスタマイズ

Google Chrome

Google Chrome のソースビューアが見づらかったので Custom.css で Komodo Edit の Dark Chalkboard 風にカスタマイズしてみました。

ソースビューアの HTML を見てみる

Google Chrome のソースビューアは HTML で書かれているのでデベロッパツールで解析することが出来ます。マークアップにはセレクタ付きの span 要素が使われています。

Google Chrome Developer Tool

Custom.css の編集

ソースビューアをカスタマイズするにはユーザースタイルシートを編集します。Mac の場合は

"~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css"

に記述します。スタイルは Custom.css を上書き保存すれば即時に反映されます。ソースビューアで使われているセレクタですが、Custom.css がデベロッパツールとも連動しているので、ソースビューアのみに適用するために一番最初の div.webkit-line-gutter-backdrop から隣接セレクタを使ったほうがいいかもしれません。

変更前と変更後

変更前

可変幅フォントと折り返しが効いてるのでコンパクトにはなっているけどちょっと見づらい。

変更後

フォントは DejaVu Sans Mono を使用しています。ちょっと見づらいですがカーソルが乗っているラインの背景色が変わるようにしています。

あとは外部リンクとかリソースリンクがアンカー要素でマークアップされてますがこれはアンダーラインを表示させておけばいいかな。

Komodo Edit についてはこちら