h-plus-time / notebookjs

Render IPython/Jupyter notebooks on the fly, in the browser. (Or on the command line, if you'd like)

notebook.js v0.2.6

Notebook.js parses raw IPython/Jupyter notebooks, and lets you render them as HTML. See a working demo here.

Usage

Notebook.js works in the browser and in Node.js. Usage is fairly straightforward.

Browser Usage

First, provide access to nb via a script tag:

<script src="notebook.browser.min.js"></script>

Then parse, render, and (perhaps) append:

var notebook = nb.parse(raw_ipynb_json_string);
var rendered = notebook.render();
document.body.appendChild(rendered);

IO.js Usage

Note: To take advantage of jsdom's latest features/bugfixes, notebook.js now runs on io.js instead of Node.js.

To install:

npm install notebookjs

Then parse, render, and write:

var fs = require ("fs");
var nb = require("notebookjs");
var ipynb = JSON.parse(fs.readFileSync("path/to/notebook.ipynb"));
var notebook = nb.parse(ipynb);
console.log(notebook.render().outerHTML);

Markdown and ANSI-coloring

By default, notebook.js supports marked for Markdown rendering, and ansi_up for ANSI-coloring. It does not, however, ship with those libraries, so you must <script>-include or require them before initializing notebook.js.

To support other Markdown or ANSI-coloring engines, set nb.markdown and/or nb.ansi to functions that accept raw text and return rendered text.

Code-Highlighting

Notebook.js plays well with code-highlighting libraries. See NBPreview for an example of how to add support for your preferred highlighter.

MathJax

Notebook.js currently doesn't support all of MathJax's syntaxes (MathML, AsciiMath, LaTeX). It does however support a significant subset of LaTeX via KaTeX.

Styling Rendered Notebooks

The HTML rendered by notebook.js (intentionally) does not contain any styling. But each key element has fairly straightfoward CSS classes that make styling your notebooks a cinch. See NBPreview for an example implementation.

Thanks

Many thanks to the following users for catching bugs, fixing typos, and proposing useful features:

• @bradhowes
• @HavenZhang