Parse subscript in markdown with react-markdown

Question

I wrote this syntax to get subscript in an .md file:

   x_i
   x~i~

react-markdown did not parse this as a subscript. I found the package remark-sub-super and this plugin as follows:

       <ReactMarkdown
          renderers={customRenderers }
          plugins={[remarkSubSuper]}
        >
          {blog.content}
        </ReactMarkdown>

This gives me an error: TypeError: Cannot set property 'sub_super' of undefined. I also added skipHtml=true to the component and wrote this in the .md file:

  b<sub>i</sub>

This did not work either. I am using next.js.

blackgreen · Accepted Answer · 2023-11-22 07:49:14Z

3

Use the below code

<ReactMarkdown 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} /> 
            },
 }}

Basically we are creating a new custom plugin.

edited Nov 22, 2023 at 7:49

blackgreen♦

46.9k29 gold badges171 silver badges162 bronze badges

answered May 28, 2021 at 9:38

Mayank Kumar Chaudhari

19.3k14 gold badges74 silver badges165 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Parse subscript in markdown with react-markdown

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related