chalk.js
v0.0.5
Published
[Chalk](//github.com/chalk/chalk) for the browser. Useful with [xterm.js](//github.com/xtermjs/xterm.js).
Downloads
26
Readme
chalk.js
Chalk for the browser. Useful with xterm.js.
Demo
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>