paiza.ioで自分の好きなフォントを使う

paiza.ioでコーディングするとき、フォントサイズや配色は設定で変えられますが、フォントそのものを変えることはできません。

ブラウザの機能拡張を利用して変えてしまいましょう！

導入するブラウザの機能拡張

「Stylish」を例にします。

• Stylish for Firefox
• Stylish for Chrome
• Stylish for Safari
• Stylish for Opera

IE、Edge愛好家のみなさん、ごめんなさい。

調整するクラス

• ソース
  • .ace_editor @paiza.io
• コメント欄
  • 全体：div.variable-area * @paiza.io
    
  • 入力欄と出力欄で分けたい場合
    入力欄のみ：div.variable-area @paiza.io
    出力欄のみ：div.variable-area pre @paiza.io
• 入力欄
  • textarea.variable-area @paiza.io
• 出力欄
  • [TEXT] or [JSON]：.stdout @paiza.io
  • [HTML]: * @out.paiza.io
    HTML出力はiframeで「out.paiza.io/~~」を埋め込んでいる

Stylish(機能拡張)での実現例

上記で挙げたクラスに対して、font-familyの値を指定します。今回は、源ノ角ゴシック Code JP(Source Han Code JP)をWindowsで指定する例とします。

Mozilla Format

@-moz-document domain("paiza.io") {
.ace_editor,
.stdout,
textarea.variable-area,
div.variable-area *{
    font-family: "Source Han Code JP";
}
}

@-moz-document domain("out.paiza.io") {
/* 出力(HTML) */
* {
    font-family: "Source Han Code JP";
}
}

Chrome

適用先:paiza.io

.ace_editor,
.stdout,
textarea.variable-area,
div.variable-area *{
    font-family: "Source Han Code JP";
}

適用先:out.paiza.io

/* 出力(HTML) */
* {
    font-family: "Source Han Code JP";
}

注意事項

• プロポーショナルフォントを指定すると悲しいことになります。やめておきましょう。
• font-familyで源ノ角ゴシック Code JPを指定するとき、WindowsとLinuxで指定値が異なります。
  • Source Han Code JPの闇(でもないけど) [Linux]
  • Source Han Code JPの闇 [Windows7]