Skip to content

How to create a table of contents in a github wiki page

Kathleen James edited this page May 8, 2015 · 18 revisions

Example using [[_TOC_]]

[[TOC]]

The [[_TOC_]] idea comes from the Gollum wiki documentation which is, apparently, the engine that powers the github wiki. But it doesn't seem to be enabled for Markdown. Someone on stackoverflow says it does work for Mediawiki syntax.

Script solution

  • A GitHub README table of contents Service "...a script that works from the command line or as a Service. You can pipe Markdown to it, run it on a file, or select it and change it in place with the Service. You just put a [toc] tag in your document where you want the Table of Contents to go, and then run it. Any headers found after the point where the tag is will be indexed and linked using GitHub-style IDs (dashes, lowercase, no other punctuation)."

  • This might also be a solution: https://greasyfork.org/en/scripts/5541-github-toc/code

Doing it manually

##Example manual table of contents

  • Application -- single word heading works without an anchor
  • Some notes -- multi-word heading with dash added between the words

##You have to hand-code it

I guess documentation in markdown is never meant to exceed a single panel because there doesn't seem to be an automatic way to build an inline table of contents. You have to write it out by hand. Which to me is stupid and a step backwards (why should a human being have to do something that a machine can do quicker and easier? but hey, what do I know?).

Here is the markdown for the example table of contents above. Note the links are all lowercase, and if there is more than one word in the heading you have to add a dash between the words.

          *  [Application](#application)
          *  [Some notes](#some-notes)

How it manages inline links

The github wiki generates an automatic anchor for headings. You need to use properly-styled headings such as this:

         ###Application

         ###Some notes     

It won't work if you only add formatting to a heading, like this:

         *Application*
The bit that I completely didn't get until a smug developer pointed it out

When you're viewing a page (but not when you're editing or previewing), a link icon appears when you hover over any heading. (In Windows, you can right-click the link and copy the link location). And that, apparently, is how people know to add the dashes to the inline tocs, because it's certainly not in the documentation anywhere.

##Example 1

Jump to the example toc and click the links to see it in action.

###Application

Latine docendi an pri, eum probo voluptatum argumentum cu. Vidit latine democritum at est. Nec luptatum expetenda te. Vocent aperiam concludaturque sea ea, nec labitur quaeque platonem ex.

##Example 2

###Some notes

Example of a heading with multiple words.

Ferri gubergren constituam mel at, id movet utroque qui. Sumo simul ne eum, te eos fabellas delicata iudicabit. Eu sit detracto reprehendunt. Ex quo nostro eirmod consectetuer, has ea aliquid tincidunt intellegebat, veritus phaedrum te cum. Ex nobis perpetua pro.

Autem homero pro et, his appetere erroribus ad, detracto vivendum gubergren in est. Ea tota choro repudiandae pri. At nec aliquip volumus democritum, ea est mollis assentior neglegentur.

###About this wiki

Speculations and tests around how to use the wiki feature of github.

Mostly using Markdown.

Clone this wiki locally