Skip to content

A simple React component that renders .ipynb files just like how they are rendered by JupyterLab.

License

Notifications You must be signed in to change notification settings

Joeyonng/react-jupyter-notebook

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-jupyter-notebook

A simple React component that renders .ipynb files just like how they are rendered by JupyterLab.

Demo: https://joeyonng.github.io/react-jupyter-notebook/

Why

I created this component because I want to embed a pure frontend jupyter notebooks (ipynb files) viewer into my personal website, which is built using React.

This project was inspired by React-Jupyter-Viewer. I still reinvented the wheel since I prefer the original looking of JupyterLab.

Install

npm install --save react-jupyter-notebook

Features

  • Nearly identical looking to original JupyterLab interface.
  • Can render codes, images, outputs, markdown(equations) and HTML in the notebook.
  • Enable resizing the height of the scrolled output.
  • Can change the alignment of the media outputs.
  • Customisable code block styling.

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import JupyterViewer from "react-jupyter-notebook";
import nb_test from "./nb_test.json"; // You need to read the .ipynb file into a JSON Object.

ReactDOM.render(
  <React.StrictMode>
    <JupyterViewer rawIpynb={nb_test}/>
  </React.StrictMode>,
  document.getElementById('root')
);

Props

Prop name Type Description (default) Values
rawIpynb Object The JSON object converted from the .ipynb file.
language String The programming language used in the notebook. "python", others
showLineNumbers Boolean Show or hide the line numbers. true, false
mediaAlign String How to align medias (images, HTML). "center", "left", "right"
displaySource String How source cells are displayed. "auto", "hide", "show"
displayOutput String How output cells are displayed. "auto", "hide", "show", "scroll"
codeBlockStyles Object Customize code cells styles. Use JupyterLab theme if undefined. undefined, {...}

Customising code block styles (codeBlockStyles prop)

I use React Syntax Highlighter for the syntax highlighting. One little problem with React Syntax Highlighter is that the whole line number container cannot be separately styled. The line number part in the original JupyterLab theme has a different background color with the codes part, so they need to be separately styled. My solution is to use two <SyntaxHighlighter/> components: one displays line numbers, and the other displays codes themselves.

You can use codeBlockStyles prop to pass the props to the SyntaxHighlighter to customize your own code block styles. Please read the docs of React Syntax Highlighter if you want to use this prop.

Property Name Type Description Which <SyntaxHighlighter/>
hljsStyle String Name of the highlight.js style object. See here. Both line number and code.
lineNumberStyle Object Style object for every line numbers object. Line number.
lineNumberContainerStyle Object Style object for the container of line numbers. Line number.
codeContainerStyle Object Style object for the container of the codes. Code.

About

A simple React component that renders .ipynb files just like how they are rendered by JupyterLab.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published