Jupyter is a collection of software tools orientated towards the processing and visualizing of data. The two most prominent tools are Jupyter Notebooks, a web-based IDE/user interface for writing software and visualizing data, and Jupyter Labs, their newer web application which incorporates Notebooks plus many other features.
Most of the code examples on this page assume you are using the Python programming language, although the features should be available in the other languages that Jupyter supports.
Jupyter Labs Keyboard Shortcuts
In can be very handy to be able to output HTML from a cell, ever to provide titles, and descriptive information or to create tables.
To output HTML, you can use the
HTML function provided from the
IPython package, along with
This can be used to create very configurable and flexible cell outputs, as you can output anything that HTML supports: tables, images, headings, e.t.c. and any combination of these! Style is also easily supplied with inline CSS.
A flexible way to include images in cell output is to output images in HTML form.
However, the above code will only work if the image is under the directory that the notebook server is running from. To include images from any directory on your computer, you can create a simple file server for your computer with:
and then change the HTML to:
Note that both of these methods will not embed the image into the HTML but rather link to it. This will result in fast load times but will require the file system/server to be available everytime you want to re-render the cell.
As shown above, adding images to the Jupyter notebook via HTML
<img> tags and a basic file server is a flexible way of controlling how exactly to display the output of cells. However, this notebook will depend on the file server being available. This might be fine for general use, but could be an issue if you want to export the Jupyter notebook and distribute it to other people.
To get around this, you can embed the images into the Jupyter notebook using
base64 encoding. The below code shows how to do this, creating a utility function called
embedded_image() which you can re-use to embed the
base64 encoding of the image data in the HTML
This work is licensed under a Creative Commons Attribution 4.0 International License .
- integrated development environments
- Jupyter Labs