【xterm】xterm.jsを使おうとすると見た目がおかしくなった話

ある日、Xtermを利用しようと考え、早速使ってみたところ、ターミナルではなく謎の文字が表示されて困った。

問題点

単純にXtermのCSSを適応してなかったことが問題だった。htmlの場合、しっかりとhead内にcssのリンクを入れてあげましょう。

<head>
    <link rel="stylesheet" href="node_modules/xterm/css/xterm.css" />
    <script src="node_modules/xterm/lib/xterm.js"></script>
</head>

Reactなどを利用している場合も忘れがちなのでスタイルシートにインポートしてあげましょう

@import '../../node_modules/xterm/css/xterm.css';

これで元のかっこいいターミナルが表示されるはずです。