chalkie

0.0.12 • Public • Published

chalkie

Chalk for the browser. Useful with xterm.js.

Demo

Live demo

image

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 Sidebar

Install

npm i chalkie

Weekly Downloads

6

Version

0.0.12

License

MIT

Unpacked Size

54.7 kB

Total Files

5

Last publish

Collaborators

  • shawwn