Miss any of our Open RFC calls?Watch the recordings here! »

notebook-preview

0.2.4 • Public • Published

notebook-preview

Lightweight preview of a notebook, nteract style

// import styles directly if using the css-loader
import 'codemirror/lib/codemirror.css';
import 'notebook-preview/styles/main.css';
import 'notebook-preview/styles/theme-light.css';
 
import NotebookPreview from 'notebook-preview';
ReactDOM.render(<NotebookPreview notebook={notebookJSON}/>, document.querySelector('nb'));

Styling

In order to have parity with nteract styling, you'll want:

  • normalize.css

  • codemirror.css

  • CSS and fonts for Source Code Pro and Source Sans Pro

  • One of the themes (e.g. theme-light) or your own that implements the same CSS variables

  • main.css from notebook-preview

You can either use the CSS loader with the styles you want as above or include them in your base HTML like so:

Example setup:

<!-- Optionally, use a conventional reset like normalize -->
<link rel="stylesheet" href="node_modules/normalize.css/normalize.css"/>
<!-- Optionally, include the fonts nteract uses -->
<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700,300,200,500,600,900' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,200italic,300,300italic,400italic,600,600italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
 
<!-- Required: CodeMirror styling -->
<link rel="stylesheet" href="node_modules/codemirror/lib/codemirror.css"/>
 
<!-- Required: Style sheets for the notebook itself -->
<link rel="stylesheet" href="node_modules/notebook-preview/theme-light.css" />
<link rel="stylesheet" href="node_modules/notebook-preview/main.css" />

Keywords

none

Install

npm i notebook-preview

DownloadsWeekly Downloads

8

Version

0.2.4

License

MPL-2.0

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar