How to style jupyter notebook in nextjs?

https://aiplanet.com/notebooks/all-notebooks

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.

References:

[embed]How to export current notebook in HTML on Jupyter Thanks for contributing an answer to Stack Overflow! Please be sure to answer the question. Provide details and share…stackoverflow.com

[embed]Styling Next.js with Styled JSX Styled JSX is a CSS-in-JS library that allows you to write encapsulated and scoped CSS to style your components. The…nextjs.org

[embed]nextjs-notebook-viewer/NotebookViewer.tsx at main · nikhilchintawar/nextjs-notebook-viewer This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below…github.com

[embed]DPhi - Democratizing Data Science Learning Learn Data Science for free through courses, practice on real-world datasets and discuss with leading domain experts…dphi.tech