How to use xterm-addon-ligatures - 6 common examples

// If you're working on enabling back WebGL, you will also need to look into `xterm-addon-ligatures` support for that renderer.
          // useWebGL = true;
        }
      }
      Term.reportRenderer(props.uid, useWebGL ? 'WebGL' : 'Canvas');

      this.term.attachCustomKeyEventHandler(this.keyboardHandler);
      this.term.loadAddon(this.fitAddon);
      this.term.loadAddon(this.searchAddon);
      this.term.loadAddon(new WebLinksAddon());
      this.term.open(this.termRef);
      if (useWebGL) {
        this.term.loadAddon(new WebglAddon());
      }
      if (props.disableLigatures !== true) {
        this.term.loadAddon(new LigaturesAddon());
      }
    } else {
      // get the cached plugins
      this.fitAddon = props.fitAddon;
      this.searchAddon = props.searchAddon;
    }

    this.fitAddon.fit();

    if (this.props.isTermActive) {
      this.term.focus();
    }

    if (props.onTitle) {
      this.disposableListeners.push(this.term.onTitleChange(props.onTitle));
    }

dispatch('resize')
        }, 250))
        commit('setObserver', observer)
      }
      const settings = rootState.settings.settings
      const xterm = tab.xterm
      xterm.open(element)
      xterm.$.fit = new FitAddon()
      xterm.loadAddon(xterm.$.fit)
      xterm.$.search = new SearchAddon()
      xterm.loadAddon(xterm.$.search)
      xterm.loadAddon(new WebLinksAddon((event, uri) => {
        if (event.altKey) shell.openExternal(uri)
      }))
      if (settings['terminal.style.fontLigatures']) {
        xterm.$.ligatures = new LigaturesAddon()
        xterm.loadAddon(xterm.$.ligatures)
      }
      observer.observe(element)
      xterm.$.fit.fit()
      xterm.focus()
    },
    interact({state, commit}, tab) {

init() {
      const fitAddon = new FitAddon();
      const ligaturesAddon = new LigaturesAddon();
      xterm = new Terminal({
        cursorStyle: "bar",
        fontSize: 12,
        experimentalCharAtlas: 'dynamic',
        fontFamily: "Monaco,Mono,Consolas,Liberation Mono,Menlo,monospace"
      });

      xterm.open(this.$refs.xterm);
      xterm.loadAddon(fitAddon);
      xterm.loadAddon(ligaturesAddon);
      fitAddon.fit();
      const ptyProcess = pty.spawn(shell, [], {
        name: "xterm-color",
        cols: xterm.cols || 80,
        rows: xterm.rows || 30,
        cwd: cwdPath,

foreground: config.terminal.colorScheme.foreground,
            background: config.terminal.background === 'colorScheme' ? config.terminal.colorScheme.background : config.appearance.vibrancy ? '#00000000' : this.themesService.findCurrentTheme().terminalBackground,
            cursor: config.terminal.colorScheme.cursor,
        }

        for (let i = 0; i < COLOR_NAMES.length; i++) {
            theme[COLOR_NAMES[i]] = config.terminal.colorScheme.colors[i]
        }

        if (this.xtermCore._colorManager && !deepEqual(this.configuredTheme, theme)) {
            this.xterm.setOption('theme', theme)
            this.configuredTheme = theme
        }

        if (this.opened && config.terminal.ligatures && !this.ligaturesAddon) {
            this.ligaturesAddon = new LigaturesAddon()
            this.xterm.loadAddon(this.ligaturesAddon)
        }
    }

cyan: window.theme.colors.cyan || colorify("#06989a", themeColor),
                    white: window.theme.colors.white || colorify("#d3d7cf", themeColor),
                    brightBlack: window.theme.colors.brightBlack || colorify("#555753", themeColor),
                    brightRed: window.theme.colors.brightRed || colorify("#ef2929", themeColor),
                    brightGreen: window.theme.colors.brightGreen || colorify("#8ae234", themeColor),
                    brightYellow: window.theme.colors.brightYellow || colorify("#fce94f", themeColor),
                    brightBlue: window.theme.colors.brightBlue || colorify("#729fcf", themeColor),
                    brightMagenta: window.theme.colors.brightMagenta || colorify("#ad7fa8", themeColor),
                    brightCyan: window.theme.colors.brightCyan || colorify("#34e2e2", themeColor),
                    brightWhite: window.theme.colors.brightWhite || colorify("#eeeeec", themeColor)
                }
            });
            let fitAddon = new FitAddon();
            this.term.loadAddon(fitAddon);
            this.term.open(document.getElementById(opts.parentId));
            let ligaturesAddon = new LigaturesAddon();
            this.term.loadAddon(ligaturesAddon);
            this.term.attachCustomKeyEventHandler(e => {
                window.keyboard.keydownHandler(e);
                return true;
            });
            this.term.focus();

            this.Ipc.send("terminal_channel-"+this.port, "Renderer startup");
            this.Ipc.on("terminal_channel-"+this.port, (e, ...args) => {
                switch(args[0]) {
                    case "New cwd":
                        this.cwd = args[1];
                        this.oncwdchange(this.cwd);
                        break;
                    case "Fallback cwd":
                        this.cwd = "FALLBACK |-- "+args[1];

onDecorated(term) {
      if (!term) {
        return;
      }

      if (this.props.onDecorated) {
        this.props.onDecorated(term);
      }

      if (term.term) {
        ligatures.enableLigatures(term.term);
      }
    }