随记

Xtermjs使用入门

Xterm是一个实现web终端的js库。

使用方法

  1. 安装依赖

    1
    2
    npm install xterm
    yarn add xterm

  2. 引入xterm

    1
    import { Terminal } from 'xterm'

  3. 相关的html代码

    1
    <div id="terminal"/>

  4. 相关的js代码

    1
    2
    3
    let term = new Terminal()
    term.open(document.getElementById('terminal'));
    term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')

常用配置

  • 字体
    • term.options.fontFamily = 'monospace'
  • 字号
    • term.options.fontSize = 12
  • 行号
    • term.options.lineHeight = 1.2
  • 主题配色
    • term.options.theme = {background: '#2b2b2b', foreground: '#A9B7C6', cursor: '#2b2b2b'}

常用插件

  • xterm-addon-fit

    提供terminal内容自适应

    1
    2
    3
    4
    5
    import { FitAddon } from 'xterm-addon-fit'

    const fitAddon = new FitAddon();
    term.loadAddon(fitAddon);
    fitAddon.fit()