How to style jupyter notebook in nextjs?
We have a notebooks feature on aiplanet.com where learners can upload their notebooks & other learners can download or learn from that notebook.
Till the last month the feature was built in ReactJs & we wanted to migrate it to nextjs when we started the project the issue we faced is the styling of the rendered jupyter notebook.
To render the jupyter notebook we first convert the jupyter notebook to HTML using nbconvert & we style that notebook using open source jupyter notebook styles.
But we were not able to use that styles as it is in nextjs because those styles have CSS variables & we can’t use CSS variables in CSS style modules & that lead me to find the optimal solution in which I don’t need to add CSS variables globally.
In nextjs we can add the global styles using styled jsx in which we use<style> tag inside the component using jsx & global prop.
So using this I was able to add the styles for jupyter notebook which you can see here(this is one of the open sourced notebook uploaded on aiplanet.com)
You can check the component here.
Make sure you use the same styles which I added in the component because when I directly use the notebook styles I faced some jss issues which I resolved in the component.
I hope this will help you to create the component for rendering jupyter notebook html & thanks for reading.
