Sebastian Raschka
last updated: 05/29/2014
Many people have asked me how I create the table of contents with internal links for my IPython notebooks and Markdown documents on GitHub.
Well, no (IPython) magic is involved, it is just a little bit of HTML, but I thought it might be worthwhile to write this little how-to tutorial.
So how does it work? Basically, all you need are those two components:
To define the destination (i.e., the section on the page or the cell you want to jump to), you just need to insert an empty HTML anchor tag and give it an id
,
e.g., <a id='the_destination'></a>
This anchor tag will be invisible if you render it as Markdown in the IPython notebook.
Note that it would also work if we use the name
attribute instead of id
, but since the name
attribute is not supported by HTML5 anymore, I would suggest to just use the id
attribute, which is also shorter to type.
Now we have to create the hyperlink to the <a id='the_destination'></a>
anchor tag that we just created.
We can either do this in ye goode olde HTML where we put a fragment identifier in form of a hash mark (#
) in front of the name,
for example, <a href='#the_destination'>Link to the destination'</a>
Or alternatively, we can just use the slightly more convenient Markdown syntax:
[Link to the destination](#the_destination)
That's all!
Of course it would make sense to place the empty anchor tags for you table of contents just on top of each cell that contains a heading.
E.g.,
<a id='section2'></a>
###Section 2
some text ...
And I did this for a very long time ... until I figured out that it wouldn't render the Markdown properly if you convert the IPython Notebook into HTML (for example, for printing via the print preview option).
But instead of
it would be rendered as
###Section 2
which is certainly not what we want (note that it looks normal in the IPython notebook, but not in the converted HTML version). So my favorite remedy would be to put the id
-anchor tag into a separate cell just above the section, ideally with some line breaks for nicer visuals.
(this alternative workaround was kindly submitted by Ryan Morshead)
Alternatively, and I think this is an even better solution, is to use header cells.
To define the hyperlink anchor tag to this "header cell" is just the text content of the "header cell" connected by dashes. E.g.,
[link to another section](#Another-section)