a post with jupyter notebook

To include a jupyter notebook in a post, you can use the following code:

{::nomarkdown}
{% assign jupyter_path = 'assets/jupyter/blog.ipynb' | relative_url %}
{% capture notebook_exists %}{% file_exists assets/jupyter/blog.ipynb %}{% endcapture %}
{% if notebook_exists == 'true' %}
  {% jupyter_notebook jupyter_path %}
{% else %}
  <p>Sorry, the notebook you are looking for does not exist.</p>
{% endif %}
{:/nomarkdown}

Let’s break it down: this is possible thanks to Jekyll Jupyter Notebook plugin that allows you to embed jupyter notebooks in your posts. It basically calls jupyter nbconvert --to html to convert the notebook to an html page and then includes it in the post. Since Kramdown is the default Markdown renderer for Jekyll, we need to surround the call to the plugin with the ::nomarkdown tag so that it stops processing this part with Kramdown and outputs the content as-is.

The plugin takes as input the path to the notebook, but it assumes the file exists. If you want to check if the file exists before calling the plugin, you can use the file_exists filter. This avoids getting a 404 error from the plugin and ending up displaying the main page inside of it instead. If the file does not exist, you can output a message to the user. The code displayed above outputs the following:

Note that the jupyter notebook supports both light and dark themes.