react-ipynb-renderer-katex
Version:
A react component that displays an ipynb file for katex.
134 lines (96 loc) • 4.97 kB
Markdown
# React Ipynb Renderer
This is a library to easily draw ipynb in a React application.
[](https://www.npmjs.com/package/react-ipynb-renderer)
[](https://github.com/righ/react-ipynb-renderer/actions/workflows/e2e.yaml)
[](https://github.com/righ/react-ipynb-renderer/blob/main/LICENSE)
[](https://app.fossa.com/projects/git%2Bgithub.com%2Frigh%2Freact-ipynb-renderer?ref=badge_shield)
<p align="center">
<img
src="https://github.com/righ/react-ipynb-renderer/raw/master/images/logo.png" alt="image" width="300" height="auto" style="align:center" />
</p>
## 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 |
| ------- | ----- |
| [](https://www.npmjs.com/package/react-ipynb-renderer) | [](https://www.npmjs.com/package/react-ipynb-renderer-katex) |
| [](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) |
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
```sh
$ npm install --save react-ipynb-renderer
```
or
```sh
$ npm install --save react-ipynb-renderer-katex
```
# Usage
Just pass an ipynb json object to `IpynbRenderer` component.
## Using ipynb as a string
If you have an ipynb file as a string, you can parse it using `JSON.parse()`:
```jsx
import { IpynbRenderer } from "react-ipynb-renderer";
// Jupyter theme
import "react-ipynb-renderer/dist/styles/monokai.css";
export const Component = () => {
const ipynbString = `{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": ["# Hello World"]
}
],
"metadata": {},
"nbformat": 4,
"nbformat_minor": 4
}`;
const ipynb = JSON.parse(ipynbString);
return (
<IpynbRenderer ipynb={ipynb} />
);
};
```
## Simplest example
### Using react-ipynb-renderer
```jsx
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
```jsx
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
## License
[](https://app.fossa.com/projects/git%2Bgithub.com%2Frigh%2Freact-ipynb-renderer?ref=badge_large)