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.