react-ipynb-renderer
v2.2.4
Published
A react component that displays an ipynb file.
Downloads
12,530
Maintainers
Readme
React Ipynb Renderer
This is a library to easily draw ipynb in a React application.
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
or
$ npm install --save react-ipynb-renderer-katex
Usage
Just pass an ipynb json object to IpynbRenderer
component.
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} />
);
};
Links
- https://docs.walkframe.com/react-ipynb-renderer
- https://www.npmjs.com/package/react-ipynb-renderer