I use HTML anchors in my Jupyter notebooks to provide internal links such as those used in a table of contents and "Return to Top"s. This works very well on my computer. However when I upload my notebooks to GitHub the invisible anchors become visible and links can no longer work. How to solve this problem?
Here are some notebooks on GitHub that have this problem:
https://github.com/mathyingzhou/boston-crime/blob/master/Boston%20Crime.ipynb
A few pointers on this, as of 2020/06/18.
In your
<a id = "1"></a>
you have a space before and after the '='. I've tested this and it's okay locally (is invisible), but GitHub breaks when parsing this and makes it visible.
You seem to have adopted Sebastian Raschka's tip of putting the anchor tag in an empty markdown cell above the one with content. I find this isn't necessary. I've been unable to reproduce Sebastian's issue with either print preview or "download as" HTML. Perhaps Jupyter's behaviour has changed (it was six years ago he posted that article!). You should find that the markdown
# A content heading<a id='headingid'></a>
works. This is invisible both locally and on GitHub when I test it. You can also link to it using a markdown such as
I want to refer to my [heading](#headingid) now
and this works as a clickable link locally in your notebook. It does not work as a clickable link in Github's own renderer. It does work as a clickable link when you paste the notebook's URL into nbviewer. I've also tried, locally, File | Download as | html, to get an html version of the ipynb and my browser renders this as expected and the links are clickable and work.
This is something I've been looking at recently and the above is currently my best working approach, i.e. append the anchor tag to your desired markdown text, do not have a space before/after the equals sign. It will look okay in GitHub, you just won't have clickable links. I'm not sure there's anyway around that using GitHub.
If anyone finds this answer useful, I'd appreciate upvotes as this is something I'm working on and looking at ways to automate. Upvotes will both encourage me and I'm open to comments that give me ideas for features to include in anything I do write to automate this.
You can use "nbviewer" to render and serve your notebook, instead of the GitHub's renderer. So you would provide a link to your notebook, in the ReadMe.md file in your repository, for instance, like so:
https://nbviewer/github/<mygithubprofile>/<link2mynotebook>
Look at the answer provided by @martijn-pieters on this post: HTML anchors in a Jupyter notebook on Github
This solved it for me.
