Default classes for each HTML element improvement

[Kameelridder]

DESCRIPTION:

The example to add default classes to the output as discussed on the wiki pages (https://github.com/showdownjs/showdown/wiki/Add-default-classes-for-each-HTML-element) uses a regular expression that will need you to set noHeaderId option to false. If this option is set to false, you are no longer able to use reference tags like a href="#titlename" to access the title from a table of contents.

CURRENT EXAMPLE CODE:

const bindings = Object.keys(classMap)
  .map(key => ({
    type: 'output',
    regex: new RegExp(`<${key}>`, 'g'),
    replace: `<${key} class="${classMap[key]}">`
  }));

const conv = new showdown.Converter({
  extensions: [...bindings],
  noHeaderId: true // important to add this, else regex match doesn't work
});

SOLUTION PROPOSAL:

If the regular expression is updated to also match other attributes in the tag (.*). The replace string can be updated to print those attributes to the output using $1.

regex: new RegExp('<${key}(.*)>', 'g'),

replace: '<${key} class="${classMap[key]}" $1>

If you change this, the noHeaderId option can be set to false again, allowing tables of contents to work again.

[tivie]

Thank you. Will update as soon as possible.

[tivie]

Updated. https://github.com/showdownjs/showdown/wiki/Add-default-classes-for-each-HTML-element

Thank you for your contribution

[juliandavidmr]

using replace: '<${key} class="${classMap[key]}" $1> you get an incorrect output, because $1 refers to the first group of the regular expression, which turns out to be the name of the html tag.

This is resolved by changing from $1 to $2, that is: <${key} class="${classMap[key]}" $2>