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 using react-ipynb-renderer.

Install

$ npm install --save react-ipynb-renderer

$ npm install --save react-ipynb-renderer-katex

Usage

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}
      syntaxTheme="xonokai"
      language="python"
      bgTransparent={true}
      formulaOptions={{ // optional
        mathjax3: {
          // https://docs.mathjax.org/en/v3.0-latest/options/input/tex.html
          tex: {
            tags: 'ams',
          },
        }
      }}
      mdiOptions={{
        html: true,
        linkify: true,
      }}
      htmlFilter={(html) => html.replace(/<\/?script.*?>/gi, '')} // Optionally provide a function to filter HTML before rendering.
    />
  </>);
};

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}
      syntaxTheme="xonokai"
      language="python"
      bgTransparent={true}
      formulaOptions={{ // optional
        texmath: {
          delimiters: "gitlab", // dollars by default
          katexOptions: {
            fleqn: false,
          },
        }
      }}
      mdiOptions={{
        html: true,
        linkify: true,
      }}
      htmlFilter={(html) => html.replace(/<\/?script.*?>/gi, '')} // Optionally provide a function to filter HTML before rendering.
    />
  </>);
};

sample

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

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. If you pass bgTransparent={false}, code background color will get back to highlighting color.

Migrate for v1

If you were using renderer mathjax

Remove the following code.

katex.min.css import (if you have been written)
- Originally, it is not used in Mathjax.
formulaOption prop.

before

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

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

// 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}
      syntaxTheme="xonokai"
      language="python"
      bgTransparent={true}
      formulaOptions={{ // Remove this
        renderer: "mathjax",
      }}
      mdiOptions={{
        html: true,
        linkify: true,
      }}
    />
  </>);
};

after

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}
      syntaxTheme="xonokai"
      language="python"
      bgTransparent={true}
      mdiOptions={{
        html: true,
        linkify: true,
      }}
    />
  </>);
};

If you were using renderer katex

Rename katex to texmath in formulaOption.
Change import name react-ipynb-render to react-ipynb-renderer-katex.

before

import { IpynbRenderer } from "react-ipynb-renderer"; // Change

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

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

export const Component = () => {
  return (<>
    <IpynbRenderer
      ipynb={ipynb}
      syntaxTheme="xonokai"
      language="python"
      bgTransparent={true}
      formulaOptions={{
        renderer: "katex", // Remove this
        katex: { // Rename this to texmath
          delimiters: "gitlab",
          katexOptions: {
            fleqn: false,
          },
        }
      }}
      mdiOptions={{
        html: true,
        linkify: true,
      }}
    />
  </>);
};

after

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}
      syntaxTheme="xonokai"
      language="python"
      bgTransparent={true}
      formulaOptions={{
        texmath: {
          delimiters: "gitlab",
          katexOptions: {
            fleqn: false,
          },
        }
      }}
      mdiOptions={{
        html: true,
        linkify: true,
      }}
    />
  </>);
};