Published
Edited
Mar 9, 2022
1 star
{
await jsConsole;
console.log(function sayHello() {
return "Hello, world!";
});
return md`This block prints an object in the console:`;
}
jsConsole = {
const div = consoleContainer;
const welcomeMessage = "Welcome here!";
function clear() {
div.innerHTML = "";
const params = {
expandDepth: 1,
common: {
excludeProperties: [`__proto__`],
maxFieldsInHead: 5,
minFieldsToAutoexpand: 5,
maxFieldsToAutoexpand: 15
}
};
const jsConsole = new Console(div, params);
console.log = jsConsole.log.bind(jsConsole);
console.dir = jsConsole.dir.bind(jsConsole);
console.clear = clear;
welcomeMessage && console.log(welcomeMessage);
return jsConsole;
}
return clear();
}
Console = {
await import("https://htmlacademy.github.io/console.js/latest/js/index.js");
return window.Console;
}
<style>
@import "https://htmlacademy.github.io/console.js/latest/css/style.css";
.console-buttons { display: flex; gap: 0.5em; }
.console-buttons > * { width: auto !important; }
.console-view {
border: 1px solid gray;
padding: 0.5em;
max-height: 15em;
overflow: auto;
}
</style>
// function appendCss(css) {
// const head = document.getElementsByTagName("head")[0];
// const link = document.createElement("link");
// link.setAttribute("rel", "stylesheet");
// link.setAttribute("href", css);
// head.appendChild(link);
// return () => link.parentElement && link.parentElement.removeChild(link);
// }
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.
