Add option to autoclose tags, for example, <hr> or <img>

[teinett]

Initial checklist

• [X] I read the support docs
• [X] I read the contributing guide
• [X] I agree to follow the code of conduct
• [X] I searched issues and couldn’t find anything (or linked relevant results below)

Problem

There are issues with tags that don't have closing tags. For example,<hr> and<img>.

In some cases we need to use it with autoclosing: <hr> => <hr /> <img> => <img />

Does the plugin have the option to add this slash symbol?

Solution

My code now, for example:

import unified from 'unified';
import markdown from 'remark-parse';
import remark2rehype from 'remark-rehype';
import html from 'rehype-stringify';
import raw  from 'rehype-raw';
import sanitize from 'rehype-sanitize';
import remarkTypograf from '@mavrin/remark-typograf';

const content = unified()
    .use(markdown)
    .use(remarkTypograf, { locale: ["ru"] })
    .use(remark2rehype, {allowDangerousHtml: true})
    .use(raw)
    .use(sanitize)
    .use(html)
    .processSync(input)
    .toString()

It would be nice to have option: .use(remark2rehype, {allowDangerousHtml: true, autoCloseTags: true})

Alternatives

I didn't find any yet.

[wooorm]

The options for formatting html can be passed to rehype-stringify: https://github.com/rehypejs/rehype/tree/main/packages/rehype-stringify#api.

What type of issues are you experiencing? All html parsers support these tags w/o that slash

[ChristianMurphy]

Hey @teinett! :wave: A good question, this plugin specifically works with abstract syntax trees, meaning it has the structure of the document, but not the exact HTML syntax that will be used. rehype-stringify handles that, and has a self closing option https://github.com/rehypejs/rehype/tree/main/packages/rehype-stringify#use

[github-actions[bot]]

Hi team! I don’t know what’s up as there’s no phase label. Please add one so I know where it’s at.

Thanks, — bb

[github-actions[bot]]

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.

[teinett]

@wooorm @ChristianMurphy You are awesome! Thank you!