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