annotations and language-dependant syntax

[parmentelat]

Hiya
thanks for this marvelous tool :)

I have been toying with it and came up with this as a tutorial for my students
https://ue22-p24.github.io/backend-flask-chatapp/scrollycoding

with the source for the actual steps page being here
https://github.com/ue22-p24/backend-flask-chatapp/blob/main/app/scrollycoding/scrolling.mdx

now, all is well, except for one itching issue:
this .mdx is automatically produced from a diff between the commits in a git repo that spells out the different steps

and because the content is generated from a diff, if I am not careful I sometimes end up with something like e.g.

## !!steps step 10

blabla

```python ! app.py
# !className separator
...
"""
some docstring
# !diff(1:1) -
the previous docstring content
# !diff(1:1) +
the next docstring content
"""

and that does not render well because, my understanding is, the language being python and the !diff annotations being within a Python string, they don't trigger like they should, and are taken litterally

so I guess my question is, how could I work around this caveat ?
I was thinking, probably I am invoking the various processing layers in the wrong order ?
I'd rather keep the proper language (here Python) for syntax highlighting of course

I am also a newbie to next.js and similar, so any suggestion for improvement is more than welcome :)

thanks again