How to create a table of contents to Jekyll blog post?

Question

If I have a page/post in Jekyll with headers, is it possible to auto-generate a table-of-contents/outline for navigation? Something akin to the top matter of a Wikipedia art

Answer 1

I have TOC for Jekyll blog which looks similar to Wikipedia TOC

So all my Jekyll posts have a Table of Contents section. It can be done just using kramdown.

Use this code inside your post where you want the TOC to appear

* Do not remove this line (it will not be displayed)
{:toc}

And use this CSS to style it like Wikipedia TOC

// Adding 'Contents' headline to the TOC
#markdown-toc::before {
    content: "Contents";
    font-weight: bold;
}


// Using numbers instead of bullets for listing
#markdown-toc ul {
    list-style: decimal;
}

#markdown-toc {
    border: 1px solid #aaa;
    padding: 1.5em;
    list-style: decimal;
    display: inline-block;
}

Use appropriate colors that suit your blog.

That is it!

TOC can also be done with the help of jekyll-table-of-contents, if in any case the above method doesn't work. This one uses Jquery and a js file.

Here is the detailed guide on how I did it: Jekyll TOC