Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

react-ipynb-renderer

Package Overview
Dependencies
5
Maintainers
1
Versions
25
Issues
File Explorer

Advanced tools

react-ipynb-renderer

A react component that displays an ipynb file.

    0.3.0latest

Version published
Maintainers
1
Yearly downloads
6,050

Weekly downloads

Readme

Source

NPM

Images

solarizedl and duotone forest themesmonokai and xonokai themes
solarizedl with duotone_earthmonokai with xonokai

Install

$ npm install --save react-ipynb-renderer

or

$ 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

  • 5?
  • 4
  • 3?

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

Keywords

FAQs

What is react-ipynb-renderer?

A react component that displays an ipynb file.

Is react-ipynb-renderer popular?

The npm package react-ipynb-renderer receives a total of 28 weekly downloads. As such, react-ipynb-renderer popularity was classified as not popular.

Is react-ipynb-renderer well maintained?

We found that react-ipynb-renderer demonstrated a healthy version release cadence and project activity. It has 1 open source maintainer collaborating on the project.

Last updated on 19 Feb 2022
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc