Mainly Devel Notes

Twitter, GitHub, StackOverflow: @ovrmrw (short hand of "overmorrow" that means the day after tomorrow)

PocketのWeb版でソースコードのあるページを読みやすくするブックマークレット

まず言いたい。
英語のページ、字が小さい。
英語って何かを伝えるためにどうしても文字数が多くなるからなのか、Webも紙面もどんな媒体でも大体字が小さい。
もう年なのか、小さい字を読んでると肩が凝って困ります。 そんなときに助かるのがPocket。文字の大きさを好きに変えられるので私には最高のサービスです。
しかし
だからといってソースコード付きのページをPocketに転送して読もうとすると、本文は良くてもソースコード部分の字が大きすぎて読みにくい。
あーもうあっちを立てればこっちが立たず。
だからブックマークレット?とかいうの作りました。生まれて初めて。

javascript:(function(){$(".reader_content").css("max-width","1000px");$(".text_body p").css("line-height","1.3");$(".text_body pre").css("font-family","Consolas,Monaco").css("font-size","12pt").css("margin","1.5em").css("line-height","1.2");})();

やってることは、

  • max-widthを1000pxにする。
  • 行間を少し狭める。
  • ソースコード部分のfont-familyとfont-sizeを変える。
  • ソースコード部分の余計なmarginを外したり行間を狭めたり。

こいつを毎回実行すればPocketで見たときもとても読みやすい!
めんどくさいのでスクリーンショットとか貼りませんが、ASP.NETポータルサイトの記事をPocketで読むときなんかに試してもらえるとわかるかと思います。
プログラマーは目を大事にしないといけませんよね。