Package Exports

react-ipynb-renderer
react-ipynb-renderer/dist/index.js
react-ipynb-renderer/dist/styles/monokai.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-ipynb-renderer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

Using ipynb as a string

If you have an ipynb file as a string, you can parse it using JSON.parse():

import { IpynbRenderer } from "react-ipynb-renderer";

// Jupyter theme
import "react-ipynb-renderer/dist/styles/monokai.css";

export const Component = () => {
  const ipynbString = `{
    "cells": [
      {
        "cell_type": "markdown",
        "metadata": {},
        "source": ["# Hello World"]
      }
    ],
    "metadata": {},
    "nbformat": 4,
    "nbformat_minor": 4
  }`;
  
  const ipynb = JSON.parse(ipynbString);
  
  return (
    <IpynbRenderer ipynb={ipynb} />
  );
};

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} />
  );
};

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} />
  );
};

JSPM