PIYO - Tech & Life -

フォント JetBrains Monoが素敵だったので導入しまくった

エディタ

JetBrains Monoが素敵すぎていろんなエディタに設定して回ったという話です。

JetBrains Mono: A free and open source typeface for developers
Try JetBrains Mono in your IDE. Its simple forms and attention to every detail make coding a nice experience for developers’ eyes, no matter which IDE you choose.

まあ↑をみにいってくれればそれまでなのですが、以下のようにプログラミングに適したフォントでオープンだという特徴があります。

  • 高さを増やして可読性を向上
  • コードリーディングに最適化
  • コード固有のリガチャ
  • JetBrains Monoは無料かつオープンソースです

特にリガチャがかっこよかったので即導入です。

!==とか>=とか<=とか~=とか、こうなるんですよ!

このブログにも似たようなフォントであるFira Codeを入れているので、それっぽいリガチャになってるはず…!

ちなみにFira Codeはこちらです。こちらもリガチャが使えます。

tonsky/FiraCode
Free monospaced font with programming ligatures. Contribute to tonsky/FiraCode development by creating an account on GitHub.

Emacsでの設定

JetBrains Monoを僕のメインエディタであるEmacsで設定する方法については特に情報がなく、色々調べていたらほぼFiraCodeと同じ設定方法でいけることがわかりました。

https://github.com/tonsky/FiraCode/wiki/Emacs-instructions#using-composition-char-table

Mac port版のEmacsでは一行書けば動くようなのですが、僕のEmacsは色々パッチを当てたりなんだりだった気がしなくもない(覚えてない)ので、↑のWikiにあるのを順に試していった結果↓のコードで動くようになりました。ただし、一部エラーが発生したので46をコメントアウトしました。

;; フォント設定
(set-face-font 'default "JetBrains Mono-14")

;; リガチャを有効にする
(let ((alist '((33 . ".\\(?:\\(?:==\\|!!\\)\\|[!=]\\)")
               (35 . ".\\(?:###\\|##\\|_(\\|[#(?[_{]\\)")
               (36 . ".\\(?:>\\)")
               (37 . ".\\(?:\\(?:%%\\)\\|%\\)")
               (38 . ".\\(?:\\(?:&&\\)\\|&\\)")
               (42 . ".\\(?:\\(?:\\*\\*/\\)\\|\\(?:\\*[*/]\\)\\|[*/>]\\)")
               (43 . ".\\(?:\\(?:\\+\\+\\)\\|[+>]\\)")
               (45 . ".\\(?:\\(?:-[>-]\\|<<\\|>>\\)\\|[<>}~-]\\)")
               ;; (46 . ".\\(?:\\(?:\\.[.<]\\)\\|[.=-]\\)")
               (47 . ".\\(?:\\(?:\\*\\*\\|//\\|==\\)\\|[*/=>]\\)")
               (48 . ".\\(?:x[a-zA-Z]\\)")
               (58 . ".\\(?:::\\|[:=]\\)")
               (59 . ".\\(?:;;\\|;\\)")
               (60 . ".\\(?:\\(?:!--\\)\\|\\(?:~~\\|->\\|\\$>\\|\\*>\\|\\+>\\|--\\|<[<=-]\\|=[<=>]\\||>\\)\\|[*$+~/<=>|-]\\)")
               (61 . ".\\(?:\\(?:/=\\|:=\\|<<\\|=[=>]\\|>>\\)\\|[<=>~]\\)")
               (62 . ".\\(?:\\(?:=>\\|>[=>-]\\)\\|[=>-]\\)")
               (63 . ".\\(?:\\(\\?\\?\\)\\|[:=?]\\)")
               (91 . ".\\(?:]\\)")
               (92 . ".\\(?:\\(?:\\\\\\\\\\)\\|\\\\\\)")
               (94 . ".\\(?:=\\)")
               (119 . ".\\(?:ww\\)")
               (123 . ".\\(?:-\\)")
               (124 . ".\\(?:\\(?:|[=|]\\)\\|[=>|]\\)")
               (126 . ".\\(?:~>\\|~~\\|[>=@~-]\\)")
               )
             ))
  (dolist (char-regexp alist)
    (set-char-table-range composition-function-table (car char-regexp)
                          `([,(cdr char-regexp) 0 font-shape-gstring]))))

VSCodeでの設定

VSCodeはさすがに簡単でした。

Font FamilyにJetBrains Monoを追加します。

さらにリガチャを有効にしたい場合には、設定ファイル(Settings.json)に以下を記載します。

  "editor.fontLigatures": true,

…ブログはFira Codeで

ブログにも入れるぞーと一瞬思ったものの、Fira CodeがCDNで配信されていて簡単そうだったのでFira Codeを使うことにしました。

なので設定はめちゃくちゃ簡単でした。

@import url(https://cdn.jsdelivr.net/gh/tonsky/FiraCode@3/distr/fira_code.css);
body { font-family: 'Fira Code', ...other fonts; }

ソースコード部分だけじゃなく、全体でFira Code最優先にさせてしまえ!ということで本文や見出しなどでも英字部分はFira Codeになっているはずです。