Documentation
Guide
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",
)
    Matplotlib is building the font cache; this may take a moment.

    <seaborn.axisgrid.FacetGrid at 0x12830caa0>
    image
    tips.head()
       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 $$

    Last updated on
    IconSteps