Doesn't work with markdown-it-toc about markdown-it-anchor

[valeriangalliat]

markdown-it-anchor and markdown-it-toc were not developed to be compatible, so I'm not surprised they don't play well together by default.

• markdown-it-toc overrides the heading renderer, so if you use it after markdown-it-anchor, it will effectively do nothing (markdown-it-anchor renderer never called).
• markdown-it-anchor extends the heading renderer, calling the previous one after modifying the token chain. This is why, when called after, the second anchor is added. However markdown-it-toc ignores the attributes from the heading token when rendering, that's why markdown-it-anchor heading ID is never added.
• Both plugins have a different way to manage IDs. markdown-it-anchor adds an ID on the heading, while markdown-it-toc adds an empty anchor with an ID.
• Both plugins have a different way to slugify the title to generate an ID. markdown-it-anchor allow to customize this function with the slugify option.

According to this, you can have both plugins to work together by relying on a "bug" (the fact that markdown-it-toc ignores the heading token attributes): just pass the markdown-it-toc title transform function to markdown-it-anchor with the slugify option so the href links to the markdown-it-toc anchors.

But I'm afraid you'll have to copy/paste this function since markdown-it-toc don't expose it, and you'll run into bugs if the plugin ever updates this function while you have the old version.

Also, if markdown-it-toc updates its renderer to consider the token attributes (fixing the "bug" you'll rely on), you'll end up with duplicate IDs, one on the heading and one on the anchor, making your HTML invalid.

---

But if we look at the problem another way, you just want to add a # inside the empty anchor markdown-it-toc adds to each heading, and a href with the ID of the same anchor.

You can achieve this by writing your own plugin:

function permalink (md) {
  var originalHeadingOpen = md.renderer.rules.heading_open

  md.renderer.rules.heading_open = function (tokens, index) {
    var html = originalHeadingOpen.apply(this, arguments)

    // Transform the HTML to add a `#` inside the anchor and a `href`.

    return html
  }
}


var md = markdownIt(opts)
  .use(markdownItToc)
  .use(permalink)

[MoOx]

I came to the same conclusions.

But I don't like to rely on a bug, so I am working on a new plugin "markdown-it-toc-and-anchor". I will let you know when it's ready ;)

[MoOx]

https://github.com/MoOx/markdown-it-toc-and-anchor

[valeriangalliat]

Pretty nice!