Jekyll Kramdown T.O.C. not building

Question

Here's the final output of what I'd like to have:

<article itemscope itemtype="http://schema.org/BlogPosting">
    <header>
        <h1>Jekyll Table of Contents with Kramdown
        </h1>
    </header>
    <nav aria-label="Table of Contents">
        <ul>
            <li>Topic 1</li>
            <li>Topic 2</li>
            <li>Topic 3</li>
        </ul>
    <nav>
    <section itemprop="articleBody">
        <p>the main body of the article</p>
    </section>
</article>

With a default Jekyll install Kramdown can create a TOC with

* TOC
{:toc}

However Markdown is not currently supported in HTML includes or Layout files. I tried using [Capture and Markdownify}(https://github.com/jekyll/jekyll/issues/6166#issuecomment-322771527) to add the above TOC call to the layout file without success

// _layouts/post.html

<article>
    <header>
        <h1>Jekyll Table of Contents with Kramdown
        </h1>
    </header>
    {% capture toc %}{% include toc.md %}{% endcapture %}
    {{ toc | markdownify }}
    <section itemprop="articleBody">
        <p>the main body of the article</p>
    </section>
</article>

Adding a inline markdownify works for plain markdown but not the Kramdown TOC call.

// this works
{% capture md %}
## Heading 2
*Stuff added in my layout*
{% endcapture %}
{{ md | markdownify }}

// This doesn't work
{% capture md %}
* TOC
{:toc}
{% endcapture %}
{{ md | markdownify }}

The only way I see around this is to include some of the layout markup in the post's markdown file.

// _layouts/post.html

<article>
    <header>
        <h1>Jekyll Table of Contents with Kramdown
        </h1>
    </header>
    {{ content }}
</article>

// _posts/post.md

---
layout: post
---
<nav aria-label="Table of Contents">
    * TOC
    {:toc}
</nav>

<section itemprop="articleBody">
    ## My Heading
    Standard markdown content here
</section>

The draw back here is that I've now got page markup in my post that can be easily corrupted and a distraction to content editors.

Does anybody see a way round this?

Answer 1

I found this excellent Ruby Gem jekyll-toc — it generates a TOC that you can place anywhere in your layout files.

I'm now successfully using the following in my _layouts/post.html:

<nav aria-label="Table of Contents">
    {{ content | toc_only }}
</nav>

<section itemprop="articleBody">
    {{ content }}
</section>