2023-07-04-jupyter-notebook.md

layout	title	date	description	tags	categories	giscus_comments	related_posts
post	a post with jupyter notebook	2023-07-04 08:57:00 -0400	an example of a blog post with jupyter notebook	formatting jupyter	sample-posts	true	false

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

{% raw %}

{::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}

{% endraw %}

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:

{::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 %}

Sorry, the notebook you are looking for does not exist.

{% endif %} {:/nomarkdown}

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