使用react-markdown渲染下标

Question

我无法使用

~this is subscript~but not this

渲染下标标记符号 (

react-markdown

)。

我可以轻松找到三种渲染方法：

remark-supersub

、

remark-sub-super

以及类似的方法：

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

...它们都不适合我（它们要么什么都不做，要么在渲染时抛出错误）。还有其他想法吗？预先感谢。

Answer 1

您提到的其中一个软件包，

remark-supersub

无需太多配置即可运行良好。

您应该将此插件作为

remarkPlugins

组件中的

Markdown

属性传递：

import Markdown from "react-markdown";
import supersub from "remark-supersub";

const markdown = `
~this is subscript~but not this
`;

export default function App() {
  return <Markdown remarkPlugins={[supersub]}>{markdown}</Markdown>;
}

这将使你的降价像这样：