Published
Edited
May 28, 2019
1 fork
Importers
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// example borrowed from xtermjs website
// https://xtermjs.org/
{
Terminal.prompt = () => {
Terminal.write("\r\n$ ");
};
`Welcome to xterm.js!
This is a local terminal emulation, without a real terminal in the back-end.
${ansiStyles.blueBright.open}This should be bright blue! ${
ansiStyles.blueBright.close
}
${ansiStyles.bgMagenta.open}This is a magenta background! 🚀${
ansiStyles.bgMagenta.close
}
${ansiStyles.greenBright.open}wow so green wow ${ansiStyles.greenBright.close}

Type some keys and commands to play around.

`
.split("\n")
.map(line => Terminal.writeln(line));
Terminal.prompt();
Terminal.on("key", function(key, ev) {
const printable =
!ev.altKey && !ev.altGraphKey && !ev.ctrlKey && !ev.metaKey;

if (ev.keyCode === 13) {
Terminal.prompt();
} else if (ev.keyCode === 8) {
// Do not delete the prompt
if (Terminal.buffer.x > 2) {
Terminal.write("\b \b");
}
} else if (printable) {
Terminal.write(key);
}
});

Terminal.on("paste", function(data) {
Terminal.write(data);
});
return md``;
}
Insert cell
ansiStyles = require("https://bundle.run/ansi-styles@3.2.1")
Insert cell
xTermObservableStyle = html`<style>
.xterm-container-observablehq {
padding: .75rem .25rem;
background-color: black;
}`
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more