https://github.com/chuangzhu/react-nbviewer

Render Jupyter Notebooks as React components
https://github.com/chuangzhu/react-nbviewer

ipython javascript jupyter react

Last synced: about 1 month ago
JSON representation

Render Jupyter Notebooks as React components

• Host: GitHub
• URL: https://github.com/chuangzhu/react-nbviewer
• Owner: chuangzhu
• License: mit
• Created: 2020-08-10T04:41:59.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-08-12T20:33:37.000Z (over 3 years ago)
• Last Synced: 2024-11-13T15:55:54.454Z (2 months ago)
• Topics: ipython, javascript, jupyter, react
• Language: Jupyter Notebook
• Homepage: https://chuangzhu.github.io/react-nbviewer/
• Size: 8.66 MB
• Stars: 2
• Watchers: 3
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-nbviewer

Render Jupyter Notebooks as React components.

[![NPM](https://img.shields.io/npm/v/react-nbviewer.svg)](https://www.npmjs.com/package/react-nbviewer) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash

npm install --save react-nbviewer

```

## Usage

```jsx

import React from 'react'

import NbViewer from 'react-nbviewer'

import 'react-nbviewer/index.css'

import Markdown from 'react-markdown'

import SyntaxHighlighter from 'react-syntax-highlighter'

```

Importing `react-nbviewer/index.css` is not required. You can style the component on your own. See [`index.css`](./index.css) for details.

## Options

| Name | Type | Description |

|:-----|:-----|:------------|

| `source` | `string` or `object` | The Jupyter Notebook source to parse. |

| `markdown` | `ReactNode<{source: string}>` | (Optional) The React component to render Markdown. [`react-markdown`](https://github.com/rexxars/react-markdown) is recommended. |

| `code` | `ReactNode<{language: string, children: string}>` | (Optional) The React component to highlight code blocks. |

## Complete example

Here's a more complete example which also renders math in Markdown cells:

```jsx

import React from 'react'

import ReactDOM from 'react-dom'

import NbViewer from 'react-nbviewer'

import Markdown from 'react-markdown'

import MathPlugin from 'remark-math'

import TeX from '@matejmazur/react-katex'

import Highlighter from 'react-syntax-highlighter'

import 'react-nbviewer/index.css'

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

const MathMarkdown = (props) => {

  const renderers = {

    math: ({ value }) => ,

    inlineMath: ({ value }) => ,

    code: props => {props.value}

  }

  return 

}

ReactDOM.render(

  ,

  document.getElementById('root')

)

```

## License

MIT © [chuangzhu](https://github.com/chuangzhu)