xterm.jsの見た目を変更する
本記事で行うこと
- xterm.jsのterminal optionをつかって見た目を変更してみます。
- xterm.jsのインストールやキーボード入力をする方法は以下を参照ください。 n-guitar.hatenablog.com
参考サイト
- 公式ドキュメント ITerminalOptions
初期状態
初期状態は以下の状態です。
new Terminalに色々optionを加えてみます。
htmlファイル
<!doctype html> <html> <head> <link rel="stylesheet" href="node_modules/xterm/css/xterm.css" /> <script src="node_modules/xterm/lib/xterm.js"></script> </head> <body> <div id="terminal"></div> <script> let term = new Terminal({ // ここに色々設定して見る。 }); term.open(document.getElementById('terminal')); function runFakeTerminal() { if (term._initialized) { return; } term._initialized = true; term.prompt = () => { term.write('\r\n$ '); }; term.writeln('Welcome to xterm.js'); term.writeln('This is a local terminal emulation, without a real terminal in the back-end.'); term.writeln('Type some keys and commands to play around.'); term.writeln(''); term.prompt(); term.onKey(e => { console.log(e) const ev = e.domEvent const printable = !ev.altKey && !ev.ctrlKey && !ev.metaKey if (ev.keyCode === 13) { term.prompt(); } else if (ev.keyCode === 8) { if (term._core.buffer.x > 2) { term.write('\b \b'); } } else if (printable) { term.write(e.key); } }); } runFakeTerminal() </script> </body> </html>
- terminalの行数を指定します。
let term = new Terminal({ // ここに色々設定して見る。 rows: 30, // terminalの行数 });
少し大きくなりました。
- カーソルを点滅させます。
let term = new Terminal({ // ここに色々設定して見る。 rows: 30, // terminalの行数 cursorBlink: true, //カーソルの点滅 });
カーソルが点滅するようになりました。
- カーソルをアンダーラインにします。
let term = new Terminal({ // ここに色々設定して見る。 rows: 30, // terminalの行数 cursorBlink: true, //カーソルの点滅 cursorStyle: 'underline' //カーソルをアンダーライン });
- renderer typeをcanvasにします。
見た目はかわりませんがPerformanceが上がるようです。
xterm.jsはvscodeにも使われているのですが、canvasにしています。
Integrated Terminal Performance Improvements
let term = new Terminal({ // ここに色々設定して見る。 rows: 30, // terminalの行数 cursorBlink: true, //カーソルの点滅 cursorStyle: 'underline', //カーソルをアンダーライン RendererType: 'canvas', // renderer typeをcanvas });
- 背景の色を変える。
設定るる値はcodeでも名称でも大丈夫です。
WEB色見本 原色大辞典 - HTMLカラーコード
let term = new Terminal({ // ここに色々設定して見る。 rows: 30, // terminalの行数 cursorBlink: true, //カーソルの点滅 cursorStyle: 'underline', //カーソルをアンダーライン RendererType: 'canvas', // renderer typeをcanvas theme: { background: 'darkslategray' } });
- 文字の色を変える。
let term = new Terminal({ // ここに色々設定して見る。 rows: 30, // terminalの行数 cursorBlink: true, //カーソルの点滅 cursorStyle: 'underline', //カーソルをアンダーライン RendererType: 'canvas', // renderer typeをcanvas theme: { background: 'darkslategray', foreground: 'orange', } });
結構自分好みにカスタマイズできそうですね。