Jekyll automatic table of contents

html, jekyll, ruby, tableofcontents, web

Solution

I emailed the Buildr developer mailing list and someone told me to look here for inspiration. Turns out that the relevant code snippet is ...

module TocFilter
  def toc(input)
    output = "<ol class=\"toc\">"
    input.scan(/<(h2)(?:>|\s+(.*?)>)([^<]*)<\/\1\s*>/mi).each do |entry|
      id = (entry[1][/^id=(['"])(.*)\1$/, 2] rescue nil)
      title = entry[2].gsub(/<(\w*).*?>(.*?)<\/\1\s*>/m, '\2').strip
      if id
        output << %{<li><a href="##{id}">#{title}</a></li>}
      else
        output << %{<li>#{title}</li>}
      end
    end
    output << '</ol>'
    output
  end
end
Liquid::Template.register_filter(TocFilter)

Make a folder in the source folder of your site called `_plugins` and then paste this code into a file called `TocFilter.rb` within that folder.

It works!!

Problem

I have built a website based on the Jekyll code for the website for Apache Buildr. The Buildr website automatically generates a table of contents for each page based on the headers in the `textile` format files. For example, you write a page using textile marking out the headings like so . . ``` h2(#why). Why are we doing this? BLah blah balh etc .. h2(#something). Some other header BLah blah balh etc .. ``` Then in the default HTML you have some code that pipes the content into something called `toc` and then you put the contents afterward. For example ... ``` <div id='content'> <h1 id='{{ page.title | downcase | replace(' ', '_') }}'>{{ page.title }}</h1> {{ content | toc }} {{ content }} </div> ``` On the Apache site they get the desired results (the toc is shown followed by the contents). However, on my site, the contents are rendered twice. No table of contents is generated. Furthermore, if I clone the Apache Buildr project directly from github and run `jekyll --server` in the `doc` folder of that project, then no table of contents is generated either. What am I missing?

Original source