search

jdsteinbach / eleventy-plugin-toc

11ty plugin to generate a TOC from page content
61 stars 19 forks source link

IDs on headings otherwise it doesn't work #5

Closed danfascia closed 4 years ago

danfascia commented 4 years ago

Great plugin but I had a pretty hard time getting this to work because I didn't feel that the following was very obvious in the docs

Note: you'll need to make sure you have ids on heading elements before this plugin will create a TOC. If there aren't ids, there will be nothing for links in this TOC to link to. (I recommend using markdown-it-anchor to add those ids to the headings: Eleventy config example)

I think that this needs highlighting stronger in the installation steps and it would be nice if you could provide some example code to render suitable ids to work well with the plugin.

I ended up pulling the markdown-it config code from the eleventy.js file in your blog repo here on Github after some digging 

  /* Markdown */
  let markdownIt = require('markdown-it')
  let markdownItAnchor = require('markdown-it-anchor')
  let options = {
    html: true,
    breaks: true,
    linkify: true,
    typographer: true
  }
  let opts = {
    permalink: true,
    permalinkClass: 'anchor-link',
    permalinkSymbol: '#',
    level: [1, 2, 3, 4]
  }

  eleventyConfig.setLibrary('md', markdownIt(options).use(markdownItAnchor, opts))
jdsteinbach commented 4 years ago

Thanks so much, Dan! (And sorry for the delayed reply)

Your suggestion is great - I'll add that to the readme!

jdsteinbach commented 4 years ago

Readme update in PR #11 (published in version #1)