The html created by Remarkable.renderer using Tokens created by new Remarkable().use(toc.plugin()) does not has attr 'id'

[aircloud]

My demand：
I want to get the catalog content and the html result. The html tag h1,h2,h3... should have id so the anchor will take effect.

but after:

const Remarkable = require('remarkable');
const toc = require('markdown-toc');
const md = new Remarkable();
const md2 = new Remarkable();
md.use(toc.plugin());

function render(str, options) {
    return md.render(str);
}

const results = render('# AAA\n## BBB\n### CCC\nfoo');

console.log(results.json);
console.log(md2.renderer.render(results.tokens));

The result :

[ { content: 'AAA', slug: 'aaa', lvl: 1, i: 0, seen: 0 },
  { content: 'BBB', slug: 'bbb', lvl: 2, i: 1, seen: 0 },
  { content: 'CCC', slug: 'ccc', lvl: 3, i: 2, seen: 0 } ]
<h1>AAA</h1>
<h2>BBB</h2>
<h3>CCC</h3>
<p>foo</p>

The result which I need:

[ { content: 'AAA', slug: 'aaa', lvl: 1, i: 0, seen: 0 },
  { content: 'BBB', slug: 'bbb', lvl: 2, i: 1, seen: 0 },
  { content: 'CCC', slug: 'ccc', lvl: 3, i: 2, seen: 0 } ]
<h1 id=aaa>AAA</h1>
<h2 id=bbb>BBB</h2>
<h3 id=ccc>CCC</h3>
<p>foo</p>

So how can I get the result with the attribute id?

After simply reading the source code of Remarkable I found Remarkable did not have the logic of setting id, so my approach above should not be correct...

note: I am not a native speaker, excuse me.

[alexhoma]

Same problem here.

Is there a way to render the content with the heading id attributes synchronized with the TOC?

[mootari]

For reference, here's what I did it:

const md = new Remarkable(opts.markdown);
const render = md.renderer.render;
const output = md.use(toc.plugin()).render(file.content);

md.renderer.rules.heading_open = function(tokens, idx) {
  const tok = tokens[idx];
  const tokContent = tokens[idx + 1];

  if(tokContent.slug) {
    const heading = '<h' + tok.hLevel + ' id="' + tokContent.slug + '">';
    const anchor = '<a'
      + ' href="#'+ tokContent.slug + '"'
      + ' title="Link to this heading"'
      + ' class="anchor"'
      + ' aria-hidden="true"'
      + '></a>';
    return heading + anchor;
  }
  return '<h' + tok.hLevel + '>';
};

file.content = render.call(md.renderer, output.tokens, md.options);
file.data.toc = output.json;