The problem I’m trying to solve is writing blog posts with Jupyter, but keep my Altair charts interactive. Furthermore, sometimes that I have widgets that would be nice to be available in my blog post for others to filter my charts etc. To maintain interactivity, I must export my notebook as HTML and not markdown.
When Jupyter notebooks get exported as HTML using nbconvert, all the dependencies are placed within the HTML file, such as the entire Bootstrap CSS framework. The bootstrap CSS framework tends to interfere with any Jekyll theme I have.
I am still learning front end, but does anyone have any ideas on strategies I can explore that allow me to only apply CSS to the notebook portion of the page and not the entire page? Through my research, the only thing I could find is using a react-based framework that allows me to localize CSS using CSS modules - however I do not want to move to a react-based framework like Gatsby for static sites and want to stay in Jekyll due to the integration with GitHub. Is there a way to achieve “component scoped CSS” with Jekyll? Or more generally, does anyone have any thoughts on concepts I can read up on that might solve this problem?
If I am thinking about this the completely wrong way and there is a completely different approach I should consider please let me know.
Thanks for your help.