react-mathjax
react-mathjax copied to clipboard
Cannot render markdown while using library with ReactMarkdown
Currently, my application uses the ReactMarkdown package to display my text and I've tried to embed my it with mathjax however cannot have everything displayed properly.
also using import RemarkMathPlugin from 'remark-math'
to parse math from text
...props,
plugins: [RemarkMathPlugin],
renderers: {
...props.renderers,
math: props => <MathJax.Text inline />,
inlineMath: props => <MathJax.Text inline />
}
};
return (
<div className='QDocMarkdownComponent'>
<MathJax.Context
input='ascii'
onLoad={() => console.log('Loaded MathJax script!')}
onError={(MathJax, error) => {
console.warn(error);
console.log('Encountered a MathJax error, re-attempting a typeset!');
MathJax.Hub.Queue(MathJax.Hub.Typeset());
}}
script='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=AM_HTMLorMML'
options={{
asciimath2jax: {
useMathMLspacing: true,
delimiters: [['$$', '$$']],
preview: 'none'
}
}}>
<ReactMarkdown escapeHtml={false} {...newProps} />
</MathJax.Context>
</div>
);```
Try
math: props => <MathJax.Node>{props.value}</MathJax.Node>,
inlineMath: props => <MathJax.Node inline>{props.value}</MathJax.Node>,