# Creating a Custom JupyterLab Notebook Markdown Cell Renderer

**URL:** <https://discourse.jupyter.org/t/creating-a-custom-jupyterlab-notebook-markdown-cell-renderer/13874>\
**Category:** extensions\
**Created:** [April 14, 2022, 10:24am UTC](https://discourse.jupyter.org/t/creating-a-custom-jupyterlab-notebook-markdown-cell-renderer/13874 "2022-04-14T10:24:24Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![psychemedia](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/psychemedia/32/24_2.png) [@psychemedia](https://discourse.jupyter.org/u/psychemedia)\
**Post date:** [April 14, 2022, 10:24am UTC](https://discourse.jupyter.org/t/creating-a-custom-jupyterlab-notebook-markdown-cell-renderer/13874/1 "2022-04-14T10:24:24Z")

</div>

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](https://github.com/agoose77/jupyterlab-imarkdown/blob/4a564a75ac85240670e4166c36fbbe3a865cb32e/src/index.ts#L18-L35) , 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:

```auto
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:

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

````

Note that the original cell content should not be updated.