Embed DOM cell into markdown

Community Help
1

I have seen in this example

That it is possible to embed a canvas element (see the sparkline) inside of a markdown text. Is it possible to embed the dom output of another cell?

3

Yes, however there is a limitation in that a DOM element cannot live in two places at onceā€”if you embed a DOM element in Markdown:

md`This is my ${element}.`

element = html`<i>element</i>`

Then the <i> element will get removed from its original display (the output of the cell) and inserted into the Markdown cell.

For this reason, itā€™s generally better to create new DOM elements when embedding them in Markdown, so that the Markdown cell is pure (i.e., it doesnā€™t have the side-effect of removing the referenced elements from the DOM). One easy way to do that is to inline the other element you want to embed, as in this contrived example:

md`This is my ${html`<i>element</i>`}.`

This is commonly done to embed LaTeX, for example:

md`My favorite formula is ${tex`e^{i\pi} = -1`}.`

If you want to create that content in another cell, then, define that other cell as a function that when called returns a new DOM element, as in done with the sparkline in the tutorial you linked:

md`This is my ${italic("element")}.`

italic = name => html`<i>${name}</i>`
3 Likes