Package Exports

react-ipynb-renderer
react-ipynb-renderer/dist/index.js

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

solarizedl and duotone forest themes	monokai and xonokai themes

This component draws an ipynb file in Jupyter Notebook. You can use MathJax or Katex to render math expressions; install react-ipynb-renderer if you use MathJax, or react-ipynb-renderer-katex if you use Katex.

If you are not particular, we recommend react-ipynb-renderer.

Demo

Install

$ npm install --save react-ipynb-renderer

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

Usage

Just pass an ipynb json object to IpynbRenderer component.

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

How to use this on Next.js

import dynamic from 'next/dynamic';
const IpynbRenderer = dynamic(() => import('react-ipynb-renderer').then((mod) => mod.IpynbRenderer), {
  ssr: false
});
// 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}
    />
  );
};

react-ipynb-renderer