How to use ansi-to-html - 10 common examples

export function convertAnsiStringToHtml(string :string) {
    // dark background colors
  let ansiToHtmlOptions = {
    fg: '#FFF',
    bg: '#000',
  };
    // light background colors
  if (atom.themes.getActiveThemeNames().some(themeName => themeName.includes('light'))) {
    ansiToHtmlOptions = {
      fg: '#000',
      bg: '#FFF',
    };
  }
  ansiToHtml = new AnsiToHtml(ansiToHtmlOptions);
  return ansiToHtml.toHtml(string);
}

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Button, Col, Modal, Progress, Row } from 'antd';
import Convert from 'ansi-to-html';
import { showDemoAlert } from '../home/redux/actions';
import * as actions from './redux/actions';

const convert = new Convert();

export class BuildPage extends Component {
  static propTypes = {
    home: PropTypes.object.isRequired,
    rekitTools: PropTypes.object.isRequired,
    actions: PropTypes.object.isRequired,
  };

  handleBuildButtonClick = () => {
    this.props.actions.runBuild().catch((e) => {
      // console.error('Failed to run build: ', e);
      if (process.env.REKIT_ENV === 'demo') {
        this.props.actions.showDemoAlert();
      } else {
        Modal.error({
          title: 'Failed to run build',

import PropTypes from "prop-types";
import React, {Component} from 'react';
import Convert from 'ansi-to-html';

import { Col, Row,  TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
import classnames from 'classnames';
import {AsyncTypeahead} from 'react-bootstrap-typeahead';
import ReactJson from 'react-json-view';

import Logs from "./Logs";
import "./Console.css";
import {EMBARK_PROCESS_NAME} from '../constants';

const convert = new Convert({newline: true, escapeXML: true});

class Console extends Component {
  constructor(props) {
    super(props);
    // Add embark to the start of the list
    this.processes = [...props.processes];
    this.processes.unshift({name: 'embark', state: 'running'});

    this.state = {value: '', isLoading: true, options: [], activeTab: EMBARK_PROCESS_NAME};
  }

  handleSubmit(event) {
    const instance = this.typeahead.getInstance();
    const activeItem = instance.state.activeItem || {};
    if(activeItem.paginationOption) {
      return;

handleOutputContentChange (content, oldContent) {
    const index = content.indexOf(this._lastContent)
    if (index > -1 && index === (content.length - 1)) {
      // nothing has changed
      return
    }
    this._lastContent = content[content.length - 1]

    if (!this.ansi) {
      this.ansi = new Ansi({ stream: true, escapeXML: true })
    }

    let newContent = content.slice(index + 1).map(({ type, ...rest }) => {
      if (type === 'message') {
        return { type, message: this.ansi.toHtml(rest.message) }
      }
      return { type, ...rest }
    })

    if (index === -1) {
      // the last content does not exist anymore, so replace the whole content
    } else {
      // append the new content
      newContent = this.props.content.concat(newContent)
    }

private static get ansiToHtmlClass(): ClassType {
        if (!CellOutput.ansiToHtmlClass_ctor) {
            // ansiToHtml is different between the tests running and webpack. figure out which one
            // tslint:disable-next-line: no-any
            if (ansiToHtml instanceof Function) {
                CellOutput.ansiToHtmlClass_ctor = ansiToHtml;
            } else {
                CellOutput.ansiToHtmlClass_ctor = ansiToHtml.default;
            }
        }
        return CellOutput.ansiToHtmlClass_ctor!;
    }

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';
import { autobind } from 'core-decorators';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Button, Col, Modal, Progress, Row } from 'antd';
import Convert from 'ansi-to-html';
import { showDemoAlert } from '../home/redux/actions';
import * as actions from './redux/actions';

const convert = new Convert();

export class BuildPage extends Component {
  static propTypes = {
    home: PropTypes.object.isRequired,
    rekitTools: PropTypes.object.isRequired,
    actions: PropTypes.object.isRequired,
  };

  handleBuildButtonClick = () => {
    this.props.actions.runBuild().catch((e) => {
      console.error('Failed to run build: ', e);
      if (process.env.REKIT_ENV === 'demo') {
        this.props.actions.showDemoAlert();
      } else {
        Modal.error({
          title: 'Failed to run build',

constructor(props: Props) {
    super(props);
    this.convert = new AnsiToHtml();
    this.defaultRange = {
      start: { line: 0, character: 0 },
      end: { line: 0, character: 0 },
    };
  }

function getAsciiToHtmlStream() {
  return new AsciiToHtml({stream: true, escapeXML: true});
}

export function ansiToHtml(text) {
  const convert = new Convert();
  return convert.toHtml(text.replace(/\n/g,'<br>'));
}