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
- https://codesandbox.io/s/react-ipynb-renderer-sample-kbu4z?file=/src/App.tsx
- https://codesandbox.io/s/react-ipynb-renderer-katex-sample-770np1?file=/src/App.tsx
Install
$ npm install --save react-ipynb-rendereror
$ npm install --save react-ipynb-renderer-katexUsage
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}
/>
);
};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}
/>
);
};


