Whitelist HTML tags for ReactMarkdown

Question

I have been happily using ReactMarkdown and I was wondering what is the easiest way to passthrough a whitelisted selection of HTML tags.

Let's use the kbd element for now as an example. I have this markdown:

Please press key <kbd>CTRL</kbd>

For obvious safety reasons, ReactMarkdown escapes <kbd> and </kbd> and it does not render as kbd HTML elements.

I know I can use the plugin rehype-raw, but is very large and I don't need to support the whole HTML: I would be happy with a compact yet brittle regexp-based implementation.

My understanding is that I have two options:

• make a remark plugin: I could make up a markdown extension (e.g. [kbd CTRL]) and create a custom plugin that generates kdb elements
• make a rehype plugin: I could parse the html generated by ReactMarkdown and create some nodes on the fly

In concrete terms, my questions are:

• should I make a remark plugin, a rehype plugin, or something else?
• could anyone share a simple code snippet to do this? I already spent some time parsing the code of some plugins, but I could not figure out how to add nodes.