![]() ![]() In this case, you can add a symbolic link that maps your templates directory to a path jupyter is scanning. Note that you might find your templates directory in a different location depending on your system. You can run jupyter -paths to see directories that jupyter will scan to discover your templates. Find the templates directory for nbconvert.To create a custom template, you will need to do the following: If you need some custom preprocessing or a specific output format for your notebook, creating a new template file (which can inherit from any of the supported base templates) is the way to go. j2 file extensions) to determine how to render a notebook. Under the hood, nbconvert uses Jinja templates (. Given that I have some experience with css and html, I found it easier to focus my effort on writing css rules to style/control the notebook. Wrote a React component to load these html files and render them in iframes.Wrote a script in gastsby-node.js to automatically convert all notebooks in a directory to html and copy to the Gatsby static folder.Wrote some custom css styling to format cells and output add custom html and js behaviors.Use nbconvert to convert the notebook to html.I ended up using the following html approach: In theory, you can write a custom template to govern the generation of markdown files using the nbconvert templating system however, again this route felt like unnecessary work. In addition, it can be challenging to visually style markdown and add interactive click behaviors. However, I found that the markdown format generated by nbconvert were not immediately compatible with Gatsby causing parse errors. I initially explored the markdown format as my Gatsby application already had a blog section based on remarkdown (a format that that allows writing JSX inside markdown files). Jupyter nbconvert -to html tensorflow.ipynb -template html Also see Mkdocs 1, a library for generating documentation sites from markdown files and jupyter notebooks 2. If you are not particular about controlling the details of the notebook, the fastpages 3 package from the incredible folks at fast.ai lets you create an entire blog completely from Jupyter notebooks. Note: The idea of Jupyter notebooks on the web is not new. Hinting at an experiment page for organizing some notebooks I have written on the web. As you will see, this is not the only approach, but it addresses my requirements above.Įxample Jupyter notebook rendered on the web. The approach I used: Create a script to convert notebooks to html using nbconvert, apply custom styling via css, add custom javascript behaviors, import and view the html in a gatsby web app using iframes.Pros and cons of two high level approaches to rendering Jupyter Notebooks in your web application. ![]() This post discusses my process in addressing these requirements and covers the following: Style the notebook to fit the web application design language and support custom behaviours (e.g., click events).Support a workflow where I can update/maintain the notebook directly and those changes are automatically synced with my web application.My key requirements for this project included: I have written a few pedagogical notebooks and I wanted to explore ways to organize/integrate them into a web application (Gatsby) where they can be browsed easily and then launched if needed. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |