chalkie

Chalk for the browser. Useful with xterm.js.

Demo

To see the demo locally, run yarn && yarn start.

Using chalkie

Include chalkie in your website:

<script src="https://unpkg.com/chalkie@latest"></script>

Then use chalk from anywhere in your code:

console.log(chalk.red("foo"))

To convert to HTML, you can call AnsiHTML and pass in a chalk string:

document.body.innerHTML = ansiHTML(chalk.red("foo"));

Example

See the source code of the live demo:

<html>
  <body>
    <script src="https://unpkg.com/chalkie@latest"></script>

    <!-- How to manually create HTML elements from chalk strings -->
    <div id="code">
    </div>
    <script>
      var html = ansiHTML(chalk.magenta.bold.italic.underline("Hello from HTML!"));
      document.getElementById("code").innerHTML = html;
    </script>

    <!-- How to use chalk with xterm.js -->
    <script src="https://unpkg.com/xterm@latest/dist/xterm.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/xterm@latest/dist/xterm.css" />

    <div id="terminal">
    </div>
    <script>
      var term = new Terminal();
      term.open(document.getElementById('terminal'));
      term.write(`${chalk.red("Hello")} from ${chalk.bold.underline.bgCyanBright.black('xterm.js')} !`);
    </script>
  </body>
</html>

Package detail

chalkie

readme

chalkie

Demo

Using chalkie

Example