【文字化け対策】Zsh等でプロンプトの表示をカスタマイズしてる際にHyperで発生する文字化けの修正方法【Source Code Pro for Powerline】

先日、カスタマイズ性の高いElectron製ターミナルアプリの「Hyper」をご紹介しました。

参考

【使い勝手最強】Electron製のマルチプラットターミナルアプリ「Hyper」のインストール方法【Windows/Mac対応】

Homebrew Mac Windows アプリケーション カスタマイズ パソコン プログラミング 便利ツール 無料

その中で、筆者のようなZshとpreztoを使ってプロンプトの表示をカスタマイズしている際に文字化けが発生する可能性があります。

筆者の場合はカレントディレクトリや.gitがあるファイルの場合はブランチ名や差分有無を表示するようにしています。

左はHyper、右はiTerm2です。
同じZsh(+prezto)の設定を読み込んでいるのになぜHyperだけ文字化けが発生するのでしょうか？

原因は、アプリごとで使用するフォントの設定の差異になります。

おそらく、iTerm2でZsh(+prezto)の設定をした際に環境設定から使用するフォントを指定したと思います。
こんな感じ。

同じようにHyperでも使用するフォントの設定は可能ですが、デフォルトだと以下のようになっています。

なので、ここに使用するフォントを追加すれば良いです。
今回で言うとSource Code Pro for Powerlineですね。
追加する際の注意点は、先頭に追加する事と、フォント名にスペースを含む場合はダブルクォーテーション(“”)で括る事ですね。
こんな感じ

それでは実際にアプリを再起動してみましょう。
※Hyperは.hyper.jsが変更されると自動で再読み込みして反映するが念のため

無事に、文字化けする事なく指定したフォントが適用されるようになりましたね♪

以上のように、原因さえわかればすぐに直す事が可能です。

同じ悩みでお困りの方はお試しください♪