![]() The snippet above scans the notebooks folder and converts all notebooks to html in the static/notebooks folder. Once you are done styling, you can then run nbconvert using your custom template. jp-InputArea-editor class), increase font-size, add copy code button to code cell (see section below) etc. Some of the css changes I made were to hide numbering in cells, add custom borders to code cells (. See the nbconvert template documentation here for more details. The goal is to identify the css classes linked to the layout elements you want to modify and update them in the css files. Update dml/static/index.css and dml/static/theme-xx.css as needed.In my case, I copied the lab template, renamed it to dml Create a new folder in the nbconvert templates directory for your template.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 Some of these tools focus on just parsing Jupyter Notebooks ( nbconvert), some focus on generation of documentation for libraries ( docusaurus, mkdocs, material for mkdocs) and others are more full featured writing tools (blogs, scientific publishing) with support for multiple formats ( fastpages, quarto). If you are not particular about controlling the details of the notebook, there are several tools that also address the task of generating web pages from Jupyter Notebooks. 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 |