react-mathjax icon indicating copy to clipboard operation
react-mathjax copied to clipboard

Cannot render markdown while using library with ReactMarkdown

Open seppar93 opened this issue 4 years ago • 1 comments

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>
  );```

seppar93 avatar May 04 '20 19:05 seppar93

Try

math: props => <MathJax.Node>{props.value}</MathJax.Node>,
inlineMath: props => <MathJax.Node inline>{props.value}</MathJax.Node>,

ProfessorX737 avatar Sep 02 '20 10:09 ProfessorX737