| solarizedl and duotone forest themes | monokai and xonokai themes | | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | | | |

This component draws an ipynb file in Jupyter Notebook. You can use MathJax to render math expressions; install ipynb-editor if you use MathJax.

If you are not particular, we recommend ipynb-editor.

Install

$ npm install --save ipynb-editor

Usage

Just pass an ipynb json object to IpynbEditor component.

Code example

Using ipynb-editor

import { IpynbEditor } from 'ipynb-editor';

// Jupyter theme
import 'ipynb-editor/dist/styles/monokai.css';
// import ipynb file as json
import ipynb from './test.ipynb';

export const Component = () => {
  return <IpynbEditor ipynb={ipynb} />;
};

How to use this on Next.js

import dynamic from 'next/dynamic';
const IpynbEditor = dynamic(
  () => import('ipynb-editor').then(mod => mod.IpynbEditor),
  {
    ssr: false,
  },
);
// import ipynb file as json
import ipynb from './test.ipynb';

export const Component = () => {
  return <IpynbEditor ipynb={ipynb} />;
};