Rich Displays for Jupyter JavaScript Kernels
In[1]:
import { display } from "https://deno.land/x/display/mod.ts";
await display(
{
"text/markdown":
"Get ready for **denotebooks**! ![](https://github.com/denoland.png?size=32)",
},
{ raw: true },
);
Out[1]:
For more examples, check out the test notebooks.
With Deno's 1.37 release comes a built in Jupyter kernel. You can create notebooks with JavaScript and TypeScript.
One key feature of Jupyter kernels is the ability to display objects as richer media types like HTML, Markdown, Images, Vega, JSON, and many more.
This module provides a simple API to display richer media types in the Deno
kernel. Centering on this is the use of a Symbol.for('Jupyter.display')
on an
object to indicate to Deno that the object should be displayed.
{
[Symbol.for('Jupyter.display')]: () => ({
'text/markdown': '# Hello from Deno'
})
}
Obviously this isn't the most fun interface which is why this module provides
a display
function to make it easier to use.
await display({ "text/markdown": "# Hello from Deno" }, { raw: true );
NOTE: display
must always be used as the last expression in a cell until
display_data
is supported (see
denoland/deno#20591)
In[2]:
import { display } from "https://deno.land/x/display/mod.ts";
import * as pl from "npm:nodejs-polars";
let df = new pl.DataFrame({
fruit: ["Apples", "Oranges"],
comparability: [0, 1],
});
await display(df);
Out[2]
:
fruit | comparability |
---|---|
Apples | 0 |
Oranges | 1 |
import { html } from "https://deno.land/x/display/mod.ts";
html`<h1>Hello Deno!</h1>`;
import { md } from "https://deno.land/x/display/mod.ts";
md`## Hello Deno!`;
- Create a
display
function to provide deno functionality likeIPython.display(obj, raw=True)
- Adapt
display
function to hook into sendingdisplay_data
on the Deno kernel (xref: denoland/deno#20591) - Duck type common objects and determine a decent representation
-
Canvas
->image/png
- Polar's
DataFrame
->{ text/html, application/vnd.dataresource+json }
- SVGElement ->
image/svg+xml
- HTMLElement ->
text/html
- React.Element ->
text/html
and/orapplication/vdom.v1+json
-