Docs
Il Delta del Po
Shortcodes
Jupyter Notebook

Jupyter Notebook Component

Experimental feature to include Jupyter Notebooks via a shortcode. Note that not all cell types are supported.

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.

    • notebook.ipynb
      • my-page.md

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

    content/docs/my-page.md
    ---
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.

        • index.md
        • notebook.ipynb
    • content/docs/my-page/index.md
    ---
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" %}}

    Example Notebook

    ℹ️
    The following is an example of a notebook file that is included in the project assets folder.

    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.

    # 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",
)
    tips.head()
    .dataframe tbody tr th {
    vertical-align: top;
}

.dataframe thead th {
    text-align: right;
}

    Equations

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

    $$ E = mc^2 $$

    IconOthers