ある日、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';
これで元のかっこいいターミナルが表示されるはずです。