Firefoxでページのソースを表示したときの色を綺麗にする

Firefox でページのソースを表示すると、こんなようなウィンドウが表示されますよね。

ページのソースを表示したところ(デザイン変更前)

Web サイトの開発をしていると、Firebug の次くらいにこの画面をよく見るのですが、あまり見ていて気持ちのいい配色ではないので、ここのデザインを変えてしまおうと思います。

まずはページのソースを表示したときに表示される、HTML ソースが書かれたページを、Firefox のウィンドウの中に表示してみます。
アドレスバーにview-source:に続けて好きな URI を入力してみてください。

例えば Mozilla Developer Network のソースを表示する場合、次のように入力します。

view-source:https://developer.mozilla.org/ja/

Firefox のウィンドウ内に表示できてしまえば、あとは Firebug などで要素を調査して、スタイルシートを書いていくだけですね。

このページにはどうやら次のスタイルシートがあたっているようです。

resource://gre-resources/viewsource.css

これもアドレスバーに入力すれば、開いて確認することができます。
見慣れない表現がいくつかありますけど、そこは無視して、文字の表示に関する部分だけ上書きしていきましょう。

各 class が何を表すのかを表にしてみました。

class 名 意味
.start-tag 開始タグの要素名 <div>
.end-tag 終了タグの要素名 </div>
.comment コメント <!-- ほげ -->
.cdata XML の CDATA <![CDATA[ ほげ ]]>
.doctype ドキュメントタイプ宣言 <!DOCTYPE html>
.pi XML 宣言と Processing Instructions <?xml version="1.0"?>
.entity 文字実体参照 &nbsp;
.text 不明
.attribute-name 属性の名前 href
.attribute-value 属性の値 text
.markupdeclaration 不明

思い付くパターンを含んだソースをいくつか表示させてみたんですけど、.text.markupdeclarationは出現せず、何を表しているのかわかりませんでした。

というわけで、これらの class それぞれに色を設定しつつ、フォントの種類やサイズ、行間などを調整してみたのがこちら。

今回僕は、上書きする CSS を Stylish を使って書きましたが、userContent.cssに書く方法でも大丈夫です。
この CSS では!importantしていないのですが、もし他のスタイルが優先されてしまうようなら!importantを付けてみて下さい。

表示してみると、このようになりました。

ページのソースを表示したところ(デザイン変更後)

■ 追記 (2018/01/24)

Firefox Quantum では Stylish などのアドオンから view-source のような Firefox 内部のページに干渉できなくなったようなので、userContent.css を使う必要があります。
また、それでもスタイルが適用されない場合は、ソースコードを表示している状態で右クリックし、「構文を強調表示」のチェックを外してみてください。
ページのソースを表示した状態での右クリックメニュー

コメントを残す