Multiple Cell Rendering

[ashra-main]

Hii @rowanc1

I've been trying to combine multiple markdown cells and split the rendered output to get something like Jupyterbook with different cells while having shared references among cells . This seem to require modifying CSS and js code after rendering to be able to split the rendered stuff and place in their cell. But currently I could only see an HTML renderer. Is there an existing functionality that also renders the CSS and js code for more control?

Cheers,
Ashra

[agoose77]

@ashra-academy could you elaborate on your question? It's not clear to me what you're asking to do, or why you need to do it, so I am not particularly able to help :/

[ashra-main]

Hii @agoose77. Thaanks for reply. I'm trying to render a page with multiple code and md cells like Colab.
But the issue is if I render each md cell separately, then the referencing won't be possible across page. For example the equation numbers will reset in each cell.

So I'm trying to combine all the md and render once, then split output and place in their place in the UI. But to do this I'll need access to CSS and JS code that Myst renderer is producing. Currently it's only giving the HTML which is not enough.

Thanks again!

[agoose77]

@ashra-academy can you elaborate on

But the issue is if I render each md cell separately, then the referencing won't be possible across page. For example the equation numbers will reset in each cell.

If you're using mystmd (this repo), then references in separate Markdown cells are shared. The only exception to that might be in the jupyterlab-myst extension with Markdown cell outputs (e.g. display(Markdown))), but I am not 100% sure on that.

[ashra-main]

I am using this react code to render myst.
https://github.com/jiboncom/myst_realtime
So I'm trying to combine all the md and render once, then split output and place in their place in the UI. There could be other stuff In between myst md cells.

[ashra-main]

HI @agoose77 ,

You may look at this repository https://github.com/ashra-academy/myst-realtime where I tried to demonstrate the issue.

So in the screen shot, we see 3 separate cells, but they all have separate equation references. But it'll be great to have consistent references across all cells. So the equations referenced would be 1, 2, 3, 4, 5, 6 instead of 1, 2, 1, 2, 1, 2.

Thanks again.

[rowanc1]

Hi @ashra-academy -- exciting project that you have going!

It looks like you are not sharing context between each cell. In this line you are creating a new preview:
https://github.com/ashra-academy/myst-realtime/blob/d2b098cee396ecc51ea69f1ce9318133d6043c8a/src/Cell.js#L24

You will have to bring the rendering code up a level so that it can process the entire document all at once. If you want to parse incrementally in each cell and cache the results, that is also possible, and would require you to run the majority of the transforms afterwards. This is the way JupyterLab-MyST works if you want to check out the code there:
https://github.com/executablebooks/jupyterlab-myst

The CSS is created using tailwind. You can see that working here:
https://github.com/executablebooks/myst-theme/blob/main/themes/book/tailwind.config.js#L1

Best of luck -- we are also on discord for real-time chat on this if you need additional help and pointers:
https://discord.mystmd.org

[ashra-main]

Thaaanks @rowanc1 for the help. And yea it's gonna be exciting when released this summer!
We are releasing Neuromatch content as Kaggle competitions!

I'm still trying to wrap my head around how to share contexts between cells. Do you have an existing code snippet where this is done with mystmd (ideally in react or nextjs)?

Cheers,
Ashra