Kramdown extension

1
votes

Kramdown has this cool Table of Content generation with 

{: .toc}

This generate a nice TOC such as in order/unorder list in html as :

<ul id="markdown-toc">
   <li></li>
   ...
</ul>

But sometime i want to control more on it like to use Bootstrap List Group or even use <div> markup then the <ul><li></li></ul>.

Is there a way to inherit/override this toc module to generate my own markup?

Note: I used github pages with jekyll.

1
javascriptjqueryhtmljekyllkramdown

1 Answers

2
votes

Unfortunately not — the {: toc} syntax doesn't accept any modifications other than through toc_levels (which allows your to specify the toc depth; see the options documentation for details). Essentially you can specify whether you'd like the list to be unordered or ordered depending on whether you use

* Table of contents
{: toc}

or

1. Table of contents
{: toc}

You can also exclude headers by using the {: .no_toc} option (at least if you're using auto-ids, since as only headers with ids are added, if you are not using that option you can also just not provide an id):

# Header
{: .no_toc}

Anything else you have to do with CSS, Javascript, or postprocessing. However, that's often relatively straightforward as you can wrap the entire toc in a <div> if you wish or add whatever class you want to the <ul>/<ol> enclosing the toc. If you're having trouble getting the toc to generate within your div, make sure you're allowing for block level parsing either with parse_block_html globally or markdown="block" options on the table of contents itself. For example,

# Header

<div markdown="block" id="xyzzy">
* TOC
{: toc .class}
</div>

should generate

<h1 id="header">Header</h1>

<div id="xyzzy">
<ul class="class" id="markdown-toc">
  <li><a href="#header" id="markdown-toc-header">Header</a></li>
</ul>

</div>