Automatic TOC in github-flavoured-markdown

Question

Is it possible to generate an automatic Table of Contents using Github Flavoured Markdown?

Answer 1

Github Flavored Markdown uses RedCarpet as their Markdown engine. From the RedCarpet repo:

:with_toc_data - add HTML anchors to each header in the output HTML, to allow linking to each section.

It seems in that you'd need to get at the renderer level to set this flag, which isn't possible on Github obviously. However, the latest update to Github Pages, it seems that automatic anchoring is turned on for headers, creating linkable headings. Not exactly what you want, but it might help you create a TOC for your doc a bit easier (albeit manually).

Answer 2

GitHub Pages (which is basically a wrapper for Jekyll) appears to use kramdown, which implements all of Maruku, and therefore has support for an automatically generated table of contents via atoc attribute:

* auto-gen TOC:
{:toc}

The first line just starts an unordered list and is actually thrown away.

This results in a nested set of unordered lists, using the headers in the document.

Note: this should work for GitHub Pages, not GitHub Flavored Markdown (GFM) as used in comments or wiki pages. AFAIK a solution doesn't exist for that.

Answer 3

If you edit Markdown files with Vim, you can try this plugin vim-markdown-toc.

The usage is simple, just move your cursor to the place you want to append Table of Contents and run :GenTocGFM, done!

Screenshots:

Features:

1. Generate toc for Markdown files. (Support GitHub Flavored Markdown and Redcarpet)

2. Update existing toc.

3. Auto update toc on save.

Answer 4

My colleague @schmiedc and I have created a GreaseMonkey script that installs a new TOC button left of the h1 button which uses the excellent markdown-js library to add/refresh a table of contents.

The advantage over solutions like doctoc is that it integrates into GitHub's wiki editor and does not need users to work on their command-line (and require users to install tools like node.js). In Chrome, it works by drag 'n dropping into the Extensions page, in Firefox you will need to install the GreaseMonkey extension.

It will work with plain markdown (i.e. it does not handle code blocks correctly, as that is a GitHub extension to markdown). Contributions welcome.

Answer 5

Here's a shell script I threw together today for this. Might need to tweak it for your needs, but it should be a good starting point.

cat README.md \
    | sed -e '/```/ r pf' -e '/```/,/```/d' \
    | grep "^#" \
    | tail -n +2 \
    | tr -d '`' \
    | sed 's/# \([a-zA-Z0-9`. -]\+\)/- [\1](#\L\1)/' \
    | awk -F'(' '{for(i=2;i<=NF;i++)if(i==2)gsub(" ","-",$i);}1' OFS='(' \
    | sed 's/^####/      /' \
    | sed 's/^###/    /' \
    | sed 's/^##/  /' \
    | sed 's/^#//'

If anyone knows a better way to do those final # replacements, please add a comment. I tried various things and wasn't happy with any, so I just brute forced it.