Creating a Custom JupyterLab Notebook Markdown Cell Renderer

If I wanted to render a markdown cell in a custom way depending on a tag value, for example, using a tag div-demo to wrap original rendered markdown output in an additional div tag ( for example, <div class="demo">ORIGINAL RENDERED MARKDOWN</div> ) what’s the best way of doing this?

@agoose77 has elsewhere suggested creating custom Markdown Content factory, as for example in jupyterlab-imarkdown/index.ts at 4a564a75ac85240670e4166c36fbbe3a865cb32e · agoose77/jupyterlab-imarkdown · GitHub , but what’s the simplest way to customise the renderer in the new factory, which is to say:

  • obtain the original rendered HTML
  • wrap it in additional div tags
  • us the customised HTML as the cell.node.innerHTML

Essentially:

function custom_render(content, class) {
  return `<div class="${class}">` + render(content) + "</div>"
}

As a second example, what if I wanted to wrap the original markdown in a code fenced tag that corresponded to a particular cell metadata tag, and then parse that fenced code by eg the jupyterlab-myst extension, which extends the markdown-it parser? How do I guarantee the following execution order:

original_markdown → {note} ... original_markdown ... → myst markdown renderer

Which is to say something like:

function custom_render2(content, tag) {
  return render(` \`\`\`{${tag}}\n`+content + "\n```")
}

Note that the original cell content should not be updated.