Self-contained JavaScript script for embedding Jupyter Notebooks into websites.
-
Include recent version of the script into your website:
<script src="https://pawelkubiak.me/nbembed.js/dist/nbembed.js"></script>
or download it and use your local copy.
-
Insert
notebooktag in place where you would like to render your notebook. Place url to your notebook raw.ipynbfile as asrcattribute:<notebook src="<notebook-url>"></notebook>
Check common usage scenarios at the end of the section for more info.
-
(Optional) You can adjust rendering properties using
configattribute:<notebook src="..." config="<config-options>"></notebook>
Allowed options are described in the the next section. Multiple options can be provided by separating them using
,(comma).
Scenario: Embedding Notebook from GitHub:
To use a notebook hosted on the GitHub platform, you must use its raw-link. To get it, open the notebook in the GitHub file browser, then click on the "Raw" or "Download" button visible on the right side above the Notebook preview.
You should see the Notebook's source code, copy and use the link to this page.
Your obtained link should look like: https://raw.githubusercontent.com/{username}/{repo}/{branch}/{file}.
For example, to embed file:https://github.com/empet/Math/blob/master/DomainColoring.ipynb
You should use url:https://raw.githubusercontent.com/empet/Math/master/DomainColoring.ipynb
Scenario: Embedding on Confluence page:
TBABelow you can check minimal code demonstrating nbembed.js usage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://pawelkubiak.me/nbembed.js/dist/nbembed.js"></script>
</head>
<body>
<notebook
src="https://raw.githubusercontent.com/empet/Math/master/DomainColoring.ipynb"
config="hide-prompts"
style="max-width: 1000px; margin:0 auto"></notebook>
</body>
</html>Live version can be previewed here: https://pawelkubiak.me/nbembed.js/docs/example.html
| option | description |
|---|---|
hide-prompts |
Hide cells numbering (ie. In[..], Out[..]) |
hide-stdout |
Hide cells standard output (eg. text displayed with print(..)) |
hide-stderr |
Hide cells errors output |
hide-code |
Hide cells source code |
hide-markdown |
Hide markdown cells |
Package use Iframe Sandboxing technique to separate notebook content from outer website.
This makes it possible to execute scripts (like interactive plots) nested in the notebook without security risks.
| Browser | Tested Versions |
|---|---|
| Desktop | |
| Google Chrome | ✔️ 109.0.5414.120 |
| Microsoft Edge | ✔️ 80.0 and newer |
| Mozilla Firefox | ✔️ 107.0 |
| Safari on MacOS | ✔️ 16 |
| Internet Explorer | ❌ 11 |
| Mobile | |
| Chrome for Android | ✔️ 108.0.5195.136 |
| Safari for iOS | ✔️ 16.0 |
| Samsung Internet | ✔️ 17.0.9.34 |
| Mozilla Firefox | ✔️ 108.1.1 |