= Jupyter Notebook to HTML :npm-name: ipynb2html :gh-name: jirutka/{npm-name} :gh-branch: master :version: 0.1.0-beta.7 :ansiup-version: 4.0.4 :hljs-version: 9.15.10 :katex-version: 0.11.1 :marked-version: 0.7.0 :vs-marketplace-uri: https://marketplace.visualstudio.com/items?itemName= ifdef::env-github[] image:https://travis-ci.com/{gh-name}.svg?branch={gh-branch}[Build Status, link="https://travis-ci.com/{gh-name}"] endif::env-github[] {npm-name} is a converter (renderer) of the https://nbformat.readthedocs.io/en/stable/[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 https://www.npmjs.com/[npm]. === {npm-name}-core ifdef::env-github[] image:https://img.shields.io/npm/v/{npm-name}-core.svg[Version on npm, link="https://www.npmjs.org/package/{npm-name}-core"] image:https://img.shields.io/bundlephobia/min/{npm-name}-core.svg[Minified bundle size, link="https://bundlephobia.com/result?p={npm-name}-core"] endif::env-github[] 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. === {npm-name} ifdef::env-github[] image:https://img.shields.io/npm/v/{npm-name}.svg[Version on npm, link="https://www.npmjs.org/package/{npm-name}"] image:https://img.shields.io/bundlephobia/min/{npm-name}.svg[Minified bundle size, link="https://bundlephobia.com/result?p={npm-name}"] endif::env-github[] This package builds on the {npm-name}-core and provides a complete, ready-to-go renderer configured with: * https://github.com/markedjs/marked[marked] as Markdown renderer, * https://github.com/KaTeX/KaTeX[KaTeX] as math renderer, * https://github.com/IonicaBizau/anser[anser] as ANSI sequences renderer, * https://github.com/highlightjs/highlight.js[highlight.js] as syntax highlighter. == Usage === Node.js (server-side) To render HTML in Node.js (server-side rendering), you need some (fake) DOM implementation. The recommended one is https://github.com/redom/nodom/[nodom] -- it’s lightweight, https://bundlephobia.com/result?p=nodom[small], doesn’t have any external dependencies and {npm-name} is tested against it. However, you can choose any other if you like. [source, subs="+attributes"] npm install {npm-name} nodom [source, js, subs="+attributes"] ---- import * as fs from 'fs' import * as ipynb from '{npm-name}' 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 {npm-name} in the browser: use the browser bundles provided in the {npm-name} package, or build your own bundle (using e.g. https://rollupjs.org[Rollup] or https://webpack.js.org/[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 https://github.com/zloirock/core-js/[core-js] polyfills to be compatible with browsers that have https://browserl.ist/?q=%3E0.5%25%2C+Firefox+ESR%2C+not+dead[>0.5% global coverage, Firefox ESR, and not dead browsers]. ==== Full Bundle `{npm-name}-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 https://www.jsdelivr.com/[jsDelivr CDN], for example: [source, html, subs="+attributes"]
... The bundle exposes global variable `{npm-name}`: [source, js, subs="+attributes"] const element = {npm-name}.render(notebook) document.body.appendChild(element) {npm-name} also provides function `autoRender` that renders each notebook on the page embedded (as JSON) inside ``.footnote:[Don’t forget to escape HTML special characters: `<`, `>`, and `&`.] [source, html, subs="+attributes"]