HTML anchors in a Jupyter notebook on Github

Question

So there is a lot out there about creating anchors in markdown, and creating internal table-of-contents-type anchors in a notebook. What I need though is the ability to access an anchor in my notebook on Github from an external source, e.g.:

https://github.com/.../mynotebook.ipynb#thiscell

I've got a number of interactive tutorials hosted this way, and a single manual that I want to be able to link to sections of the notebooks for. I can add the anchor tags into markdown cells just fine, using:

<a id='thiscell'></a> 

but when I try using the link as I wrote above, it just loads the notebook at the top, as if there was no reference to an anchor.

Answer 1

GitHub renders notebooks using a separate domain, render.githubusercontent.com, and integrates the output in a nested frame. This means that any anchors on the GitHub URL won't work, because the framed document is a different URL entirely.

Moreover, the framed content is not easily re-usable, as the result is a cached rendering of the notebook with a limited lifetime. You can't rely on it sticking around for later linking!

So if you need to be able to link to sections in a notebook, you'd be far better off using the Jupyter notebook viewer service, https://nbviewer.jupyter.org/. It supports showing notebooks from any public URL including GitHub-hosted repositories and GitHub gists. You can also just enter your GitHub user name (or username/repository) for quick access.

This notebook viewer is far more feature-rich than the one GitHub uses. GitHub kills all embedded JavaScript, and strips almost all HTML attributes. Any embedded animations are right out. But the Jupyter nbviewer service supports those directly out of the box.

E.g. compare these two notebooks on nbviewer:

• https://nbviewer.jupyter.org/github/mjpieters/adventofcode/blob/master/2018/Day%2020.ipynb
• https://nbviewer.jupyter.org/github/mjpieters/adventofcode/blob/master/2018/Day%2021.ipynb

with the same notebooks on GitHub:

• https://github.com/mjpieters/adventofcode/blob/master/2018/Day%2020.ipynb
• https://github.com/mjpieters/adventofcode/blob/master/2018/Day%2021.ipynb

The first one contains an animation at the end, the second has a complicated table made easier to read by use of some HTML styling and anchor links.

Answer 2

I had the same problem. As a workaround, I have delegated the rendering of my notebook to http://nbviewer.jupyter.org. It's just a matter of providing its GitHub public url and clicking Go!

Of course, the internal links still don't work under GitHub, but I have now a functioning notebook somewhere on the web, which is what I actually wanted in the first place.

I hope this applies to your case too.