ipynb2html is a converter (renderer) of the Jupyter Notebook Format 4.0+ to static HTML. It works both in Node.js and browser environment.
This repository contains the following packages, all published on npm.
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.
This package builds on the ipynb2html-core and provides a complete, ready-to-go renderer configured with:
-
marked as Markdown renderer,
-
KaTeX as math renderer,
-
anser as ANSI sequences renderer,
-
highlight.js as syntax highlighter.
It also provides a reference stylesheet which you can find in dist/notebook.min.css (or non-minified styles/notebook.css).
ipynb2html-cli is also provided as a single minified JavaScript with all the external dependencies bundled in. It requires only Node.js (version 10 or newer) to be installed on the system.
The archive also contains source maps (useful for debugging).
If you use Alpine Linux, you can also install it from package ipynb2html.
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 nodomimport * 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)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.
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/[email protected]/dist/notebook.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/notebook.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/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>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/[email protected]/dist/katex.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/marked.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/ansi_up.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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.
-
NodeJS 10.13+
-
Pandoc and Asciidoctor (used only for converting README.adoc to Markdown for npmjs)
-
TypeScript the language
-
ttypescript wrapper for
tscallowing to use custom AST transformers -
yarn for dependencies management and building
-
ESLint for linting JS/TypeScript code
-
Jest for testing
-
Rollup for building single-file bundles
-
Clone this repository:
git clone https://github.com/jirutka/ipynb2html.git -
Install Yarn (if you don’t have it already):
npm install -g yarn -
Install all JS dependencies:
yarn install -
Build the project:
yarn build -
Run tests and generate code coverage:
yarn test -
Run linter:
yarn lint
|
Important
|
Keep in mind that JS sources are located in the src directories; lib directories contains transpiled code (created after running yarn build)!
|
If you use Visual Studio Code, you should install the following extensions:
-
The renderer module is originally based on notebookjs 0.4.2 developed by Jeremy Singer-Vine and distributed under the MIT License.
-
The mathExtractor module is based on mathjaxutils.js from the Jupyter Notebook 6.0.1 distributed under the Modified BSD License.
This project is licensed under MIT License. For the full text of the license, see the LICENSE file.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent