JetBrains Monoが素敵すぎていろんなエディタに設定して回ったという話です。
まあ↑をみにいってくれればそれまでなのですが、以下のようにプログラミングに適したフォントでオープンだという特徴があります。
- 高さを増やして可読性を向上
- コードリーディングに最適化
- コード固有のリガチャ
- JetBrains Monoは無料かつオープンソースです
特にリガチャがかっこよかったので即導入です。
!==とか>=とか<=とか~=とか、こうなるんですよ!
このブログにも似たようなフォントであるFira Codeを入れているので、それっぽいリガチャになってるはず…!
ちなみにFira Codeはこちらです。こちらもリガチャが使えます。
Emacsでの設定
JetBrains Monoを僕のメインエディタであるEmacsで設定する方法については特に情報がなく、色々調べていたらほぼFiraCodeと同じ設定方法でいけることがわかりました。
https://github.com/tonsky/FiraCode/wiki/Emacs-instructions#using-composition-char-table
Mac port版のEmacsでは一行書けば動くようなのですが、僕のEmacsは色々パッチを当てたりなんだりだった気がしなくもない(覚えてない)ので、↑のWikiにあるのを順に試していった結果↓のコードで動くようになりました。ただし、一部エラーが発生したので46をコメントアウトしました。
1;; フォント設定
2(set-face-font 'default "JetBrains Mono-14")
3
4;; リガチャを有効にする
5(let ((alist '((33 . ".\\(?:\\(?:==\\|!!\\)\\|[!=]\\)")
6 (35 . ".\\(?:###\\|##\\|_(\\|[#(?[_{]\\)")
7 (36 . ".\\(?:>\\)")
8 (37 . ".\\(?:\\(?:%%\\)\\|%\\)")
9 (38 . ".\\(?:\\(?:&&\\)\\|&\\)")
10 (42 . ".\\(?:\\(?:\\*\\*/\\)\\|\\(?:\\*[*/]\\)\\|[*/>]\\)")
11 (43 . ".\\(?:\\(?:\\+\\+\\)\\|[+>]\\)")
12 (45 . ".\\(?:\\(?:-[>-]\\|<<\\|>>\\)\\|[<>}~-]\\)")
13 ;; (46 . ".\\(?:\\(?:\\.[.<]\\)\\|[.=-]\\)")
14 (47 . ".\\(?:\\(?:\\*\\*\\|//\\|==\\)\\|[*/=>]\\)")
15 (48 . ".\\(?:x[a-zA-Z]\\)")
16 (58 . ".\\(?:::\\|[:=]\\)")
17 (59 . ".\\(?:;;\\|;\\)")
18 (60 . ".\\(?:\\(?:!--\\)\\|\\(?:~~\\|->\\|\\$>\\|\\*>\\|\\+>\\|--\\|<[<=-]\\|=[<=>]\\||>\\)\\|[*$+~/<=>|-]\\)")
19 (61 . ".\\(?:\\(?:/=\\|:=\\|<<\\|=[=>]\\|>>\\)\\|[<=>~]\\)")
20 (62 . ".\\(?:\\(?:=>\\|>[=>-]\\)\\|[=>-]\\)")
21 (63 . ".\\(?:\\(\\?\\?\\)\\|[:=?]\\)")
22 (91 . ".\\(?:]\\)")
23 (92 . ".\\(?:\\(?:\\\\\\\\\\)\\|\\\\\\)")
24 (94 . ".\\(?:=\\)")
25 (119 . ".\\(?:ww\\)")
26 (123 . ".\\(?:-\\)")
27 (124 . ".\\(?:\\(?:|[=|]\\)\\|[=>|]\\)")
28 (126 . ".\\(?:~>\\|~~\\|[>=@~-]\\)")
29 )
30 ))
31 (dolist (char-regexp alist)
32 (set-char-table-range composition-function-table (car char-regexp)
33 `([,(cdr char-regexp) 0 font-shape-gstring]))))
VSCodeでの設定
VSCodeはさすがに簡単でした。
Font FamilyにJetBrains Monoを追加します。
さらにリガチャを有効にしたい場合には、設定ファイル(Settings.json)に以下を記載します。
1 "editor.fontLigatures": true,
…ブログはFira Codeで
ブログにも入れるぞーと一瞬思ったものの、Fira CodeがCDNで配信されていて簡単そうだったのでFira Codeを使うことにしました。
なので設定はめちゃくちゃ簡単でした。
1@import url(https://cdn.jsdelivr.net/gh/tonsky/FiraCode@3/distr/fira_code.css);
2body { font-family: 'Fira Code', ...other fonts; }
ソースコード部分だけじゃなく、全体でFira Code最優先にさせてしまえ!ということで本文や見出しなどでも英字部分はFira Codeになっているはずです。
