ipynb2html is a converter (renderer) of the Jupyter Notebook
Format 4.0+ to static HTML.
It works both in Node.js and browser environment.
Packages
This repository contains the following packages, all published on
npm.
ipynb2html-core
This package provides the converter itself and some utilities with no
dependencies. You have to provide your own syntax highlighter and
Markdown, math and ANSI sequences renderer; or not, if you don’t need
them.
ipynb2html
This package builds on the ipynb2html-core and provides a complete,
ready-to-go renderer configured with:
It also provides a reference stylesheet which you can find in
dist/notebook.min.css
(or non-minified
styles/notebook.css
).
ipynb2html-cli
This package provides a CLI interface for ipynb2html.
Usage
CLI
ipynb2html notebook.ipynb notebook.html
Run ipynb2html --help
for more information.
Node.js (server-side)
To render HTML in Node.js (server-side rendering), you need some (fake)
DOM implementation. The recommended one is
nodom — it’s lightweight,
small, doesn’t have any
external dependencies and ipynb2html is tested against it. However, you
can choose any other if you like.
npm install ipynb2html nodom
import * as fs from 'fs'
import * as ipynb from 'ipynb2html'
import { Document } from 'nodom'
const renderNotebook = ipynb.createRenderer(new Document())
const notebook = JSON.parse(fs.readFileSync('./example.ipynb', 'utf8'))
console.log(renderNotebook(notebook).outerHTML)
Browser (client-side)
You have basically two options how to use ipynb2html in the browser: use
the browser bundles provided in the ipynb2html package, or build your
own bundle (using e.g. Rollup or
webpack).
The provided bundles are in UMD format (AMD, CommonJS and IIFE in one
file), so they should work in all environments (old and modern browsers,
Node.js). They are transpiled and have injected
core-js polyfills to be
compatible with browsers that have >0.5% global coverage, Firefox
ESR, and not dead
browsers.
Full Bundle
ipynb2html-full.min.js
is a self-contained bundle with all the
external dependencies included (marked, KaTeX, Anser and Highlight.js).
You can link it from jsDelivr CDN, for
example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ipynb2html@0.4.0-rc.1/dist/notebook.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.3/dist/katex.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.3/build/styles/default.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/ipynb2html@0.4.0-rc.1/dist/ipynb2html-full.min.js" crossorigin="anonymous"></script>
</head>
...
</html>
The bundle exposes global variable ipynb2html
:
const element = ipynb2html.render(notebook)
document.body.appendChild(element)
ipynb2html also provides function autoRender
that renders each
notebook on the page embedded (as JSON) inside
<script type="application/x-ipynb+json">...</script>
.[1]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ipynb2html@0.4.0-rc.1/dist/notebook.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.3/dist/katex.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.3/build/styles/default.min.css" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/ipynb2html@0.4.0-rc.1/dist/ipynb2html-full.min.js" crossorigin="anonymous"
onload="ipynb2html.autoRender();"></script>
</head>
<body>
<main>
<script type="application/x-ipynb+json">
{
"cells": [ ... ],
"metadata": { ... },
"nbformat": 4,
"nbformat_minor": 3
}
</script>
</main>
</body>
<html>
Slim Bundle
ipynb2html.min.js
contains only ipynb2html and ipynb2html-core code
(plus polyfills). If you load marked, KaTeX, AnsiUp, and Highlight.js in
the page, you will get the same functionality as with
ipynb2html-full.min.js
:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.3/dist/katex.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.3/build/styles/default.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/marked@4.1.1/marked.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/ansi_up@5.0.1/ansi_up.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.3/build/highlight.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.3/dist/katex.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/ipynb2html@0.4.0-rc.1/dist/ipynb2html.min.js" crossorigin="anonymous"></script>
</head>
...
</html>
Or you may use any other implementations and provide them to the
ipynb2html.createRenderer
function. All of them are optional, but you
usually need at least a Markdown renderer.
Credits
License
This project is licensed under MIT
License. For the full text of the
license, see the LICENSE file.
[1] Don’t forget to escape HTML special characters: <
, >
, and &
.