使用 react-markdown 解析 markdown 中的下标答案

【问题标题】：Parse subscript in markdown with react-markdown使用 react-markdown 解析 markdown 中的下标
【发布时间】：2021-06-15 20:19:51
【问题描述】：

我编写了这个语法来获取 .md 文件中的下标：

   x_i
   x~i~

react-markdown 没有将其解析为下标。我找到了包remark-sub-super和这个插件如下：

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

这给了我一个错误：TypeError: Cannot set property 'sub_super' of undefined。我还在组件中添加了skipHtml=true，并将其写在 .md 文件中：

  b<sub>i</sub>

这也不起作用。我正在使用 next.js。

【问题讨论】：

标签： javascript next.js markdown react-markdown

【解决方案1】：

使用下面的代码

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

基本上我们正在创建一个新的自定义插件。

您可能还想阅读this story。

【讨论】：