ソースコード中の記号がリガチャ(合字)になる問題の修正方法

当サイトではソースコードを紹介している記事がありますが、記号の表示が一部意図しない部分があることに気づきました。

• not equalを表す != が ≠ のように表示される
• C/C++のアロー演算子 -> が → のように表示される

以下のように != が1つの文字として表示されていました。

結論としてはこれはフォント設定の問題で、意図せずリガチャ（合字）機能が働いていることが原因でした。

解説

当サイトではWord Pressのプラグイン、Code Block Proを用いてコードをハイライト表示していました。

プラグインの設定でフォントとしてJetBrains Monoを使っていたのですが、このフォントは機能としてリガチャ（合字）をサポートしており、自動的に記号の見え方を変更するようです。

公式サイトでも売りの機能として紹介されています。

JetBrains Mono: A free and open source typeface for developers

これ自体は面白い機能ではあると思いますが、自分の開発環境ではこれまで使ったことが無かった機能なので、混乱を招くかもしれないと思いました。

修正方法としては単純で、フォントを変更するのみです。

JetBrains Monoのデザインは良いと思っていたので、リガチャオフバージョンのJetBrains Mono (No Ligatures)を選択しました。（もちろん別のフォントでもOK）

記事編集画面でCode Block Proの要素を選択して、Font Stylingからフォントを変更します。

あとは記事を保存すれば反映されます。

表示サンプル

以下にCode Block Proの表示サンプルを置きます。閲覧環境により表示が異なる可能性がありますが、見え方の参考になれば幸いです。

JetBrains Monoフォント(リガチャオン)

# not equalがリガチャになる例
if num != 2:

# not equalがリガチャになる例
if num != 2:

// アロー演算子がリガチャになる例
hoge->fuga();

// アロー演算子がリガチャになる例
hoge->fuga();

JetBrains Mono (No Ligature)フォント(リガチャオフ)

# not equalが通常通り表示される例
if num != 2:

# not equalが通常通り表示される例
if num != 2:

// アロー演算子が通常通り表示される例
hoge->fuga();

// アロー演算子が通常通り表示される例
hoge->fuga();