[ENH] Add thebelab button to every code cell

[joergbrech]

This is something that I found useful for my jupyter book. Feel free to decline if you think this is an unnecessary feature upstream.

This fixes #117

[joergbrech]

Ok, I just realized that this also adds a thebelab button to code cells in pure markdown files, e.g. the ones on this page: https://jupyter.org/jupyter-book/guide/05_advanced.html. I am not sure how I can differentiate the two cases...

[choldgraf]

hey @joergbrech - I quite like it! I think that you could narrow down the CSS selection by using the > selector, which requires a specific set of parent/child elements.

For example, check out how this is done for the code cell CSS:

https://github.com/jupyter/jupyter-book/blob/master/jupyter_book/book_template/_sass/components/_components.textbook__page.scss#L46

Here's the built docs from this PR:

https://948-137292803-gh.circle-artifacts.com/0/html/features/interact.html

(if you click on the edit button, the CSS will look weird in the code cells, but that's just a bug that has already been squashed)

would love to hear what @emdupre or @jasmainak thinks about it!

[joergbrech]

Wow, that was easy. Thanks for the hint!

[jasmainak]

do we have an example book with these buttons? :-)

[joergbrech]

do we have an example book with these buttons? :-)

There you go : https://961-137292803-gh.circle-artifacts.com/0/html/features/notebooks.html
The button is the small pencil in the top right corner of the code cells

[jasmainak]

I get "/bin/sh: 1: jupyter-book: not found" when I run the cells. But it was probably an old problem ...

[mathieuboudreau]

The line spacing is off when I click the pencil; not sure if it's this PR or a current issue. I remember that this happened before and was resolved.

Also note that the vertical line is my typing cursor position.

[joergbrech]

@mathieuboudreau Can you please try again? I updated the link in my comment. It should now include the latest jupyter book changes where the messy lines are fixed.

@jasmainak This only refers to the last cell on that page right? If I run thebelab on the master version of that page https://jupyter.org/jupyter-book/features/notebooks.html I get a similar error with slightly different behavior:

Before pressing "Thebelab":

After pressing "Thebelab":

This can prabably be fixed by using a markdown code cell rather than a ipybn code cell in this file: https://github.com/jupyter/jupyter-book/blob/master/jupyter_book/book_template/content/features/notebooks.ipynb

[mathieuboudreau]

My issue was resolved! thanks!

[jasmainak]

hmm ... but you are getting the error on the next line where it's expected.

I will try again later, need to run now. Thanks for the PR!

[joergbrech]

Ah, sorry, you are right, I scrolled to the wrong code cell after starting Thebelab. Sorry for the confusion!

The error message has nothing to do with this PR, jupyter-book is simply missing in the binder requirements.

[emdupre]

I am a big fan of this ! Thanks so much @joergbrech ! ✨

Can we also update the documentation to reference these ? I think it would make sense here, but would love to hear other ideas !

[choldgraf]

ok, I think this is quite nice from a UI standpoint (minimal visual change, but obvious behavior upon change), so let's give it a merge and see how it feels to people!

[choldgraf]

thanks so much @joergbrech for the improvement!