I'm looking for contributors. I noticed that quite a lot of developers find this tool useful and at the same time I feel guilty that I cannot devote enough time to this project due to personal committments. Please reachout in case anyone wants to contribute!
Join the following Slack Workspace for any queries:
https://join.slack.com/t/reactjupytern-0nc7370/shared_invite/zt-gacg79oi-NYk9coLNBUXiqtQ80ohMKg
The only reason why I am creating this component is to be able to publish my .ipynb notebooks on my GitHub pages as blog post. I have too many notebooks lying around with my programming notes. I'm too lazy to boot a ipython kernel to view one of my notebooks. Hence, this component.
I like the default notebook viewer provided by github but there are a few features that would make it more usable for me, which are mostly these: downloading it as a PDF, dark mode, mobile-enabled view and ability to publish my notebooks as blogs
Drop me a message if anyone wanna contribute.
(cover image src: https://notionpress.com/blog/wp-content/uploads/2018/06/Cover-design.png)
- Load from local file
- Load from URL
- Code blocks
- Render markdown blocks
- Render image blocks
- Render Error blocks
- Add tags to distinguish outputs
- Cell block numbering
- Header Tab (Showing name of notebook and date etc.)
- Hide code execution number (toggle)
- Theme Toggle
- Markdown Dark Theme
- Resolve Relative Markdown sources for images
- Split as A4 size pages
- Side-by-side view
- Download notebook as pdf (will have to enable wordwrap while downloading it as pdf)
- text/html code block parser
- Markdown based index
prop | priority | description |
---|---|---|
file | Critical | Load a file from storage |
url | Critical | Load a file from storage |
theme | good to have | Change from dark to light |
blog title | Critical | Title for the blog. |
blog cover | good to have | An option to put in cover pic for your blog |
Note that the notebook URL must be the raw_notebook url on github. Click on the 'raw' button in github notebook preview to get the raw source.
import React from 'react';
import './App.css';
import JupViewer from './JupViewer'
const ipynb = require('./BenchmarkNotebook.ipynb')
class App extends React.Component {
render() {
return (
<div className="App">
<JupViewer
title="Jupyter as a Blog!"
subtitle="I've always wanted to publish my jupyter notebooks as blogs. Finally I can."
coverImg="https://notionpress.com/blog/wp-content/uploads/2018/06/Cover-design.png"
// file={ipynb}
file="https://raw.githubusercontent.com/jakevdp/PythonDataScienceHandbook/master/notebooks/00.00-Preface.ipynb"
/>
</div>
)
}
}
export default App;
Dark | Light |
---|---|
![]() |
![]() |
- react-ace
- react-markdown
- antd (UI lib cuz I'm too lazy)