Using Notebooks in online textbook

sdwfrost · August 2, 2018, 3:04pm

Dear All,

I’m trying to embed some Observable notebooks into a Jekyll-powered online textbook that mostly uses Jupyter notebooks. See:

http://epirecip.es/epicookbook/chapters/sir/js

Is there a straightforward way I can change the CSS to match the parent, and to only include a subset of the cells that are displayed in the output?

Best wishes
Simon

aaronkyle · August 2, 2018, 7:23pm

Hi there.

Looks like you’re generating your page from here:

github.com

epirecipes/epicookbook/blob/master/_chapters/sir/js.md

---
interact_link: notebooks/sir/js.ipynb
title: 'Javascript'
permalink: 'chapters/sir/js'
previouschapter:
  url: chapters/sir/vfgen
  title: 'VFGEN'
nextchapter:
  url: chapters/sir/js_observable
  title: 'Javascript using Observable'
redirect_from:
  - 'chapters/sir/js'
---

## SIR model in Javascript


{:.input_area}
```javascript
const rk4 = require("ode-rk4");

This file has been truncated. show original

And that you’re embedding your Observable notebook as a iFrame?

Have you tried working through @jashkenas 's embed tutorial? Jeremy talks about how one can pull in each cell at a time, which may address your question about showing a subset of your notebook’s cells.

Regarding the CSS, @Fil 's Jekyll example writes additional CSS into the Jekyll page HTML:

aaronkyle · August 3, 2018, 12:18pm

I clumsily hacked this together. I continue to struggle to get the CSS looking good, but it at least it shows your visualization with only one control in Jekyll:

Topic		Replies	Views
Embedded cell loses CSS style Community Help	6	1508	June 5, 2020
Jupyter + Observable Show and Tell	3	1381	March 11, 2020
To what extent can I completely customise the look of a notebook? Community Help	9	616	April 14, 2021
proly too sooon, but would be cool to see observablehq notebooks renderred on github	7	1090	July 5, 2020
trouble embedding cells into HTML page Community Help	6	1436	August 16, 2019

Using Notebooks in online textbook

Related topics