Google Collab や Jupyter Notebook でバックスラッシュを表示させたい

序文

プログラミングにおいてどうしてもバックスラッシュが円記号であるのが[しっくりこない|我慢ならない|イケてない|がっかりだ]という方々のために。

免責事項

この記事の内容は、2020年10月3日に実現できた方法です。
jupyter notebook や google collab の仕様変更により適用不可になる可能性があることを予めご承知いただければと思います。

実現方法

ユーザースタイルシートを使えばいいじゃんか

ということで、Stylusというドメインごとにユーザー独自でスタイルシートを設定できる機能拡張で実現します。
以下はGoogle Chrome での例ですが、Mozilla Firefox でも同名の機能拡張が存在します。
また、safariでは標準でユーザースタイルシートの機能があるようです。

Stylus

まずは機能拡張の導入です。
以下のページへアクセスして機能拡張を導入してください。

アドレスバー横のジグソーパズルアイコン（機能拡張）をクリックして、Stylusをピン止め設定しておくとアイコンが常時表示されて便利です。

Stylus
https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=ja

ローカル環境のJupyter Notebookでの設定

~/.jupyter/custom/custom.css を作る方法もありますが、今回はStylusでの変更方法です。

Jupyter Notebookを起動してブラウザにて表示させます。
表示後、Stylusアイコンをクリックします。

Stylusのcss編集画面が表示されますので、以下の様に入力します。

css

pre.CodeMirror-line span, .output_text pre{
    font-family: "DejaVu sans mono";
}

次で始まるURL

http://localhost:8888/notebooks/

このCSSの指定は、jupyter notebookのコードinput欄と結果output欄に該当します。
フォントは、巷では定番であると思われる DejaVu sans mono を指定してみました。

また、「次で始まるURL」のデフォルトは元のページのフルパスになります。このままだとこのノートにしか適用されないので、 http://localhost:8888/notebooks/ までURLを削っておきます。

この結果、元のページはこのような表示になります。

InとOutのフォントがちゃんと変更されました。円記号もバックスラッシュで表示されています。成功です！

Google Collab での設定

それでは、次にGoogle Collab でのフォント変更をやってみましょう。
jupyter notebook の時と同様に、collabのノートページを開いてStylusのアイコンをクリックします。

表示されたポップアップで、「次のスタイルを書く」の欄にcolab.reaearch.google.comと表示されています。
そのうちの、colabをクリックします。クリックするurlの場所により適用するurlのパターンが変わります。

次に、cssは以下の様に入力します。

css

div.view-line *{
    font-family: "DejaVu sans mono";
}

ここではinput側のスタイルしか設定しません。
なぜなら、google collabは 入力欄と出力欄でドメインが異なるからです。
入力欄はこのページのドメイン colab.reaearch.google.com での表示ですが、出力欄はiframeで別のドメインからの出力となっています。
一旦このスタイルは保存し、もう一度stylusのアイコンをクリックして「次のスタイルを書く」のURLをクリックし、新しい編集ウィンドウを表示させます。

今度は、CSSと適用先を以下の様に変更します。

css

div.output_text *{
    font-family: "DejaVu sans mono";
}

適用先

ドメイン上のURL : googleusercontent.com

上記の通り、出力欄側のドメインは googleusercontent.com です。このようにドメイン別にスタイルを書く必要があります。

両方保存したらcollabのノートを確認してみましょう。

しっかりとフォントが変更され、円記号もバックスラッシュになっています。こちらも成功です！

終わりに

今回はStylusを利用して円記号をバックスラッシュに（見た目）変更する方法をご紹介いたしました。
ユーザースタイルシートをうまく活用するといろいろな場面で役に立つかと思います。他のオンラインコードエディタでも試してみてください。