haku-maiのブログ

インフラエンジニアですが、アプリも作ります。

xterm.jsの見た目を変更する

本記事で行うこと

  • xterm.jsのterminal optionをつかって見た目を変更してみます。
  • xterm.jsのインストールやキーボード入力をする方法は以下を参照ください。 n-guitar.hatenablog.com

参考サイト

初期状態

初期状態は以下の状態です。
new Terminalに色々optionを加えてみます。
f:id:n-guitar:20201114205328p:plain:w600

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の行数
        });

少し大きくなりました。
f:id:n-guitar:20201114205419p:plain:w600

  • カーソルを点滅させます。
let term = new Terminal({
          // ここに色々設定して見る。
          rows: 30, // terminalの行数
          cursorBlink: true, //カーソルの点滅
        });

カーソルが点滅するようになりました。
f:id:n-guitar:20201114205801g:plain:w600

  • カーソルをアンダーラインにします。
let term = new Terminal({
          // ここに色々設定して見る。
          rows: 30, // terminalの行数
          cursorBlink: true, //カーソルの点滅
          cursorStyle: 'underline' //カーソルをアンダーライン
        });

f:id:n-guitar:20201114210054p:plain

let term = new Terminal({
          // ここに色々設定して見る。
          rows: 30, // terminalの行数
          cursorBlink: true, //カーソルの点滅
          cursorStyle: 'underline', //カーソルをアンダーライン
          RendererType: 'canvas', //  renderer typeをcanvas
        });
        let term = new Terminal({
          // ここに色々設定して見る。
          rows: 30, // terminalの行数
          cursorBlink: true, //カーソルの点滅
          cursorStyle: 'underline', //カーソルをアンダーライン
          RendererType: 'canvas', //  renderer typeをcanvas
          theme: {
            background: 'darkslategray'
          }
        });

f:id:n-guitar:20201114211713p:plain:w600

  • 文字の色を変える。
        let term = new Terminal({
          // ここに色々設定して見る。
          rows: 30, // terminalの行数
          cursorBlink: true, //カーソルの点滅
          cursorStyle: 'underline', //カーソルをアンダーライン
          RendererType: 'canvas', //  renderer typeをcanvas
          theme: {
            background: 'darkslategray',
            foreground: 'orange',
          }
        });

f:id:n-guitar:20201114212137p:plain:w600

結構自分好みにカスタマイズできそうですね。