[ Google Chrome ] ソース表示の見た目を CSS で変更する

Google Chrome で、ウェブページのソースを表示する時の見た目を CSS で変更する方法がわかったのでシェア。ずっと、等幅フォントで、小さい文字にしたかったんですよね〜。

▲ スタイル適用前と適用後

ソース表示の見た目を変更する方法 ———————————————————————-

ソース表示の見た目を変更するには、次のファイルを編集します。

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

スタイルはお好みで。例えば、次のような感じです。

/* ソース表示 */
.webkit-line-gutter-backdrop + table {
    font-size: 12px;
    line-height :1.5;
    }
.webkit-line-gutter-backdrop + table .webkit-line-content {
    font-family: Osaka-Mono, monospace;
    white-space: pre;
    }

今回、試してみた環境 ———————————————————————-

– Google Chrome 26.0.1410.43 – Mac OS 10.8.3

参考にさせてもらったページ ———————————————————————-

– Google Chrome のソースビューアを Komodo Edit（Dark Chalkboard）風にするカスタマイズ｜mattintosh note

ありがとうございます！

コメントを残す