chalk.js

Chalk for the browser. Useful with xterm.js.

Usage no npm install needed!

<script type="module">
  import chalkJs from 'https://cdn.skypack.dev/chalk.js';
</script>

README

chalk.js

Chalk for the browser. Useful with xterm.js.

Demo

Live demo

image

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

Using chalk.js

<script src="https://unpkg.com/chalk.js@latest/chalk.js"></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/chalk.js@latest/chalk.js"></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>