jekyll-toc

Usage

Add jekyll-toc plugin in your site's Gemfile.

gem 'jekyll-toc'

And add the jekyll-toc to your site's _config.yml.

gems:
  - jekyll-toc

Add toc filter to your site's {{ content }} (e.g. _layouts/post.html).

{{ content | toc }}

Set toc: true in your posts.

---
layout: post
title: "Welcome to Jekyll!"
toc: true
---

Generated Table of Contents HTML

jekyll-toc generates Unordered List. The final output is as follows.

<ul class="section-nav">
  <li><a href="#heading1">Heading.1</a></li>
  <li><a href="#heading2-1">Heading.2-1</a></li>
  <li><a href="#heading2-2">Heading.2-2</a></li>
  <li><a href="#heading3">Heading.3</a></li>
  <li><a href="#heading2-3">Heading.2-3</a></li>
</ul>

It looks like the image below.

CSS Styling

The toc can be modified with CSS. The sample CSS is the following.

.section-nav {
  background-color: #FFF;
  margin: 5px 0;
  padding: 10px 30px;
  border: 1px solid #E8E8E8;
  border-radius: 3px;
}

TODO

• Test
• Travis CI
• Coverage & Coverall
• Close toc with JavaScript