React Ipynb Renderer

This is a library to easily draw ipynb in a React application.

downloads

Theme

Please choose your favorite combination from the multiple themes available for Jupyter and syntax highlighting.

There are several options for each, allowing you to find the perfect match for your preference.

solarizedl and duotone forest themes	monokai and xonokai themes

As for jupyter themes, you may use your own customized CSS. You do not necessarily have to use the prepared jupyter theme.

Formula renderer

You can choose Mathjax or Katex for rendering formulas.

Normally I would recommend choosing react-ipynb-renderer which uses Mathjax.
react-ipynb-renderer-katex is a bit lighter than the mathjax version.

Mathjax	Katex

These will be released at the same time, so the versions will be the same. Even if only one of them has been changed.

Install

$ npm install --save react-ipynb-renderer

$ npm install --save react-ipynb-renderer-katex

Usage

Just pass an ipynb json object to IpynbRenderer component.

Simplest example

Using react-ipynb-renderer

import { IpynbRenderer } from "react-ipynb-renderer";
// Jupyter theme
import "react-ipynb-renderer/dist/styles/monokai.css";
// import ipynb file as json
import ipynb from "./test.ipynb";
export const Component = () => {
  return (
    <IpynbRenderer ipynb={ipynb} ></IpynbRenderer>
  );
};

Using react-ipynb-renderer-katex

import { IpynbRenderer } from "react-ipynb-renderer-katex";
// Formula renderer for katex
import 'katex/dist/katex.min.css';
// Jupyter theme
import "react-ipynb-renderer-katex/dist/styles/monokai.css";
// import ipynb file as json
import ipynb from "./test.ipynb";
export const Component = () => {
  return (
    <IpynbRenderer ipynb={ipynb} ></IpynbRenderer>
  );
};