Package Exports

react-ipynb-renderer

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

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";

// 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", // or katex
        mathjaxContextProps: { version: 2 }, // mathjax3 by default
        mathjaxProps: {dynamic: true},
        katex: {
          delimiters: "gitlab", // dollars by default
          katexOptions: {
            fleqn: false,
          },
        }
      }}
    />
  </>);
};

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 mathjax and katex for the formula.