Images

solarizedl and duotone forest themes	monokai and xonokai themes

Install

$ npm install --save react-ipynb-renderer

$ yarn add react-ipynb-renderer

Usage

Just pass an ipynb json object to IpynbRenderer component.

Code example

import React from "react";
import { IpynbRenderer } from "react-ipynb-renderer";

// Formula renderer for katex
import 'katex/dist/katex.min.css';

// Jupyter theme
import "react-ipynb-renderer/dist/styles/monokai.css";
// import ipynb file as json
import ipynb from "./test.ipynb";

export const Component: React.FC = () => {
  return (<>
    <IpynbRenderer
      ipynb={ipynb}
      syntaxTheme="xonokai"
      language="python"
      bgTransparent={true}
      formulaOptions={{ // optional
        renderer: "mathjax", // katex by default
        katex: {
          delimiters: "gitlab", // dollars by default
          katexOptions: {
            fleqn: false,
          },
        }
      }}
    />
  </>);
};

sample

https://codesandbox.io/s/react-ipynb-renderer-sample-kbu4z?file=/src/App.tsx

supporting nbformat

2 ways to get ipynb json.

import ipynb from "./path/to/some.ipynb" (requires json-loader)
const ipynb = JSON.parse(ipynbString)

Themes

Jupyter themes

If you do not want to style the notebook yourself, you can use one of the following themes.

chesterish
grade3
gruvboxd
gruvboxl
monokai
oceans16
onedork
solarizedd
solarizedl

These are the same as jupyter-themes.

Import to use as follow:

import "react-ipynb-renderer/dist/styles/monokai.css";

Syntax highlight themes

It highlights the code of the notebook using react-syntax-highlighter.

You can select one of prism themes.

atomDark
cb
coy
darcula
dark
duotoneDark
duotoneEarth
duotoneForest
duotoneLight
duotoneSea
duotoneSpace
funky
ghcolors
hopscotch
okaidia
pojoaque
prism
solarizedlight
tomorrow
twilight
vscDarkPlus
xonokai (default)

Pass the theme string to syntaxTheme prop.

<IpynbRenderer
  ipynb={ipynb}
  syntaxTheme="xonokai"
/>

bgTransparent prop

The background color of the code is transparent by default. For this reason, depending on the combination with jupyter theme, it may be difficult to see the text color. You pass bgTransparent={false}, code background color gets back to highlighting color.

Formula

You can choose between katex and mathjax for the formula.

Specify "katex" or "mathjax" to formulaOptions.renderer. (katex will be used by default) If you use katex renderer, import katex/dist/katex.min.css like the following:

import 'katex/dist/katex.min.css';

panjunqiu/react-ipynb-renderer