Hook markdown cell editor to change what is stored

Hi, I wonder if there is a way to hook the cell editor and change the text after “loading” and before “saving”.

What I’m trying to do is to provide a syntax extension to markdown cells. For example, a tutor could easily leave comments in a different color, or you could add grades to cells with a consistent syntax. That is easy to do in an extension - just use custom tags or classes and provide the corresponding CSS with the extension. The problem is, when you share the notebook with somebody who doesn’t have the extension, it looks different. So what I want to do is, when you enter:

<comment>This is a comment</comment>

and press Shift+Enter, it will save it as something like:

<div class="comment" style="color: green">This is a comment</div>

And when you start editing the cell, it will transparently replace the explicit HTML with the shorter tags again.

Now, I’m not sure this is a good idea at all :slight_smile: introducing incompatible syntax extensions and fractioning the language. But I’d like to try out how usable it is in practice, and I think this is a low impact way of introducing custom syntax.

Any idea how an extension could do this? I see two places to hook, either on the Python side during de-/serialisation from/to the ipynb, or on the frontend when the editor loads the text from the model and when it saves it.

I found the https://github.com/agoose77/jupyterlab-markup project, but that hooks the renderer, so it can change the output but not what is written to the notebook. I think I would need to hook either MarkdownCell, or maybe CodeEditor or InputArea?