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

I'm assuming you mean a list of all H1, H2 elements etc in the content itself? I don't think Jekyll has anything built-in to handle that. I suspect the easiest way is to let Javascript generate it for you once the page has rendered, using something like this jQuery plugin, or one of the many other plugins/snippets available.


That is the markup parser's task.

In case of Markdown one of the syntax extensions defines Automatic generation of the table of contents:

* This will become a table of contents (this text will be scrapped).
{:toc}

This works in Maruku and kramdown.


I have TOC for Jekyll blog which looks similar to Wikipedia TOC enter image description here

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