Support for <sub> and <sup>

[srikanthbhamidipalli]

No description provided.

[ellismarte]

is there any progress on this?

[ChristianMurphy]

There is a remark plugin to support this https://github.com/zestedesavoir/zmarkdown/tree/master/packages/remark-sub-super

Which may work already, if not #428 would allow for it to work.

[gtsop]

@ChristianMurphy this plugin doesn't work. I am sorry but I am very confused trying to track down the issues/pull-requests regarding this feature. Is there someone who knows what we need to do to get a sub/sup tag working?

[wooorm]

If you are using an HTML tag to add sub/sup, then yes: that’s HTML and it’s dangerous.

If you want a markdown-like “construct”, remark-sub-sup hasn’t been updates for the latest parser, which is tracked here: zestedesavoir/zmarkdown#416.

[gtsop]

If you are using an HTML tag to add sub/sup, then yes: that’s HTML and it’s dangerous.

If you want a markdown-like “construct”, remark-sub-sup hasn’t been updates for the latest parser, which is tracked here: zestedesavoir/zmarkdown#416.

I would like to use anything available really, markdown syntax preferable ofcourse to be more user friendly. Seems like the dangerous html route is the only way to get this working as of right now. I am personally ok with this because my input is very controlled by an admin, but I assume not everyone will be covered as I.

[wooorm]

We’re working on making the HTML better, such as sanitizing it by default (see @ChristianMurphy’s PR above), but we’re splitting it over several majors to not break too many things at once

[ankurpiparsania]

The way I solved this and other may find useful is as per below with use of components:

<ReactMarkdown remarkPlugins={[gfm]} children={props.content} components={{ em: ({ node, ...props }) => { if ( props.children[0] && typeof props.children[0] === 'string' && props.children[0].startsWith('^')) { return <sup>{props.children[0].substring(1)}</sup> } if ( props.children[0] && typeof props.children[0] === 'string' && props.children[0].startsWith('~')) { return <sub>{props.children[0].substring(1)}</sub> } return <i {...props} /> }, }}

with above code i can use ^® or ^th for superscripts and ~1 for subscripts.

hope above is useful.