Display cell scrollbar in Jupyter Notebook on GitHub

Notebook
1

A cell output in one of my Jupyter notebooks has a vertical scrollable side bar. When I added this notebook to my GitHub repository, the full output (which takes up a lot of space) was displayed. Is it possible for GitHub to display the cell output with a sidebar?

Below is a minimal working example illustrating the problem. Here is a screenshot of a cell in a Jupyter Notebook that has a scrollbar:

Screen Shot 2022-01-10 at 1.29.23 PM
Screen Shot 2022-01-10 at 1.29.23 PM2296Ă—868 31 KB

If this notebook is converted to HTML via jupyter nbconvert --to html name.ipynb and viewed in a browser (to replicate publishing and viewing the notebook on GitHub), then the output looks like this (there is no scrollbar):

Screen Shot 2022-01-10 at 1.54.38 PM
Screen Shot 2022-01-10 at 1.54.38 PM1170Ă—980 22.3 KB

I found the following related links, but no one has posted a solution yet:

Any help would be appreciated!

2

In those examples, one could likely use custom CSS (as indeed one of them does), and these techniques would work in nbviewer as well… but probablty not in another client, like JupyterLab, CoLab, CoCalc, VSCode or… GitHub.

As for GitHub specifically… you get what GitHub gives you. It doesn’t use nbconvert, and a lot of content types get stripped out. Further, nobody in the Jupyter community really has any insight into how/when things change on GitHub.

1 Like
3

Thank you for your help! I greatly appreciate it.

4

To follow-up, a nice example of nbviewer being superior is that it automatically adds horizontal scroll bars for wide code cells by default whereas GitHub just cuts off your ability to view long code.

Demonstration:
Look at the third code cell here at GitHub and compare it to the same cell here via nbviewer.
If you make each window narrow, you’ll notice you cannot view the text on the far right side of the cell at GitHub. nbviewer adds scrollbars when narrow so that you can still view the code.