Jupyter Notebook Component

Jupyter Notebook is a language-agnostic HTML notebook application for Project Jupyter. It allows you to create and share documents that contain live code, equations, visualizations, and narrative text.

How to use

Using a local notebook

To use the Jupyter Notebook shortcode, you need to have a Jupyter Notebook file in your project. Similar to how you would add images to the project, you can add Jupyter Notebooks to the assets folder.

Include the Jupyter Notebook in the page using the jupyter shortcode:

---
title: My Page
math: true
---

{{< jupyter "notebook.ipynb" >}}

Alternatively, you can utilize the page bundles feature of Hugo to organize the Jupyter Notebooks together with the Markdown file.

---
title: My Page
math: true
---

{{< jupyter "notebook.ipynb" >}}

Using a remote notebook

You can also use a remote notebook by providing the URL to the notebook file. For example, to include What is the Jupyter Notebook notebook in the page, you can use the following shortcode:

{{< jupyter "https://raw.githubusercontent.com/jupyter/notebook/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb" >}}

Showing In/Out prompts

You can display Jupyter-style In [N]:/Out[N]: execution count prompts by using named parameters with prompts=true:

{{< jupyter src="notebook.ipynb" prompts=true >}}

Note: when using prompts or other named parameters, the notebook path must use the src parameter instead of a positional argument.

Example Notebook

What is the Jupyter Notebook?

The Jupyter Notebook is an interactive computing environment that enables users to author notebook documents that include:

• Live code
• Interactive widgets
• Plots
• Narrative text
• Equations
• Images
• Video

These documents provide a complete and self-contained record of a computation that can be converted to various formats and shared with others using email, version control systems (like Git/GitHub) or nbviewer.jupyter.org.

Data Visualization

Below is an example of a simple data visualization using the Seaborn library.

In [1]:

# Import seaborn
import seaborn as sns

# Apply the default theme
sns.set_theme()

# Load an example dataset
tips = sns.load_dataset("tips")

# Create a visualization
sns.relplot(
    data=tips,
    x="total_bill", y="tip", col="time",
    hue="smoker", style="smoker", size="size",
)

Out[1]:

Matplotlib is building the font cache; this may take a moment.

<seaborn.axisgrid.FacetGrid at 0x12830caa0>

In [2]:

tips.head()

Out[2]:

   total_bill   tip     sex smoker  day    time  size
0       16.99  1.01  Female     No  Sun  Dinner     2
1       10.34  1.66    Male     No  Sun  Dinner     3
2       21.01  3.50    Male     No  Sun  Dinner     3
3       23.68  3.31    Male     No  Sun  Dinner     2
4       24.59  3.61  Female     No  Sun  Dinner     4

	total_bill	tip	sex	smoker	day	time	size
0	16.99	1.01	Female	No	Sun	Dinner	2
1	10.34	1.66	Male	No	Sun	Dinner	3
2	21.01	3.50	Male	No	Sun	Dinner	3
3	23.68	3.31	Male	No	Sun	Dinner	2
4	24.59	3.61	Female	No	Sun	Dinner	4

Equations

The following is an example of a simple equation using LaTeX.

$$E = mc^2$$

Supported Output Types

Output Types

This notebook demonstrates all supported output types and cell visibility metadata.

print("Hello from stdout")

Hello from stdout

import sys
print("Warning: something happened", file=sys.stderr)

Warning: something happened

1 / 0

---------------------------------------------------------------------------
ZeroDivisionError                         Traceback (most recent call last)
Cell In[3], line 1
----> 1 1 / 0
ZeroDivisionError: division by zero

import pandas as pd
df = pd.DataFrame({'Name': ['Alice', 'Bob'], 'Score': [95, 87]})
df

    Name  Score
0  Alice     95
1    Bob     87

	Name	Score
0	Alice	95
1	Bob	87

from IPython.display import SVG
SVG('<svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="steelblue"/></svg>')

from IPython.display import Markdown
Markdown('**Bold text** and `inline code` from display_data')

<IPython.lib.display.Markdown object>

Bold text and inline code from display_data

from IPython.display import Latex
Latex(r'E = mc^2')

<IPython.lib.display.Latex object>

$$E = mc^2$$

from IPython.display import JSON
JSON({'name': 'hextra', 'version': '1.0', 'features': ['search', 'dark-mode']})

<IPython.core.display.JSON object>

{
  "features": [
    "search",
    "dark-mode"
  ],
  "name": "hextra",
  "version": "1.0"
}

42 + 1

43

This is a raw cell.
It should be rendered as preformatted text.

Attachments and Output Metadata

The following cells test inline attachments, image dimensions from output metadata, and scrolled output state.

Inline attachment image:

# Output image dimensions come from output metadata

# Output should use the scrolled output style
for i in range(20):
    print(f'line {i}')

line 0
line 1
line 2
line 3
line 4
line 5
line 6
line 7
line 8
line 9
line 10
line 11
line 12
line 13
line 14
line 15
line 16
line 17
line 18
line 19

Cell Visibility Metadata

The following cells test hidden and collapsed metadata. Hidden cells should not render; collapsed outputs should start closed.

but output is visible

# Source visible, output hidden
print('this output should be hidden')

output visible via tag

# Source visible, output collapsed by default
print('collapsed output')

Output

collapsed output