Render math expressions in Markdown with Mathjax as a React component

react-markdown-mathjax.js

import ReactMarkdown from 'react-markdown';
import MathJax from 'react-mathjax';
import RemarkMathPlugin from 'remark-math';

function MarkdownRender(props) {
    const newProps = {
        ...props,
        plugins: [
          RemarkMathPlugin,
        ],
        renderers: {
          ...props.renderers,
          math: (props) => 
            <MathJax.Node formula={props.value} />,
          inlineMath: (props) =>
            <MathJax.Node inline formula={props.value} />
        }
      };
      return (
        <MathJax.Provider input="tex">
            <ReactMarkdown {...newProps} />
        </MathJax.Provider>
      );
}

export default MarkdownRender

Hi! i am using typescript. I try to solve this problem - create component which can render markdown and use mathjax. I try use your logic, but new version of react-markdown doesn't have such props as renderers. So, could you please help me!

This is the outdated method of doing this. Now you need:

• react-markdown
• remark-math
• rehype-katex

important: you need to import "katex/dist/katex.min.css" too.

        <ReactMarkdown
          children={props.children}
          remarkPlugins={[remarkMath]}
          rehypePlugins={[rehypeKatex]}
        />

try with this

This is the outdated method of doing this. Now you need:

• react-markdown
• remark-math
• rehype-katex

important: you need to import "katex/dist/katex.min.css" too.

        <ReactMarkdown
          children={props.children}
          remarkPlugins={[remarkMath]}
          rehypePlugins={[rehypeKatex]}
        />

try with this

This help me a lot thanks tou

@saverioscagnoli thank you very much!

@saverioscagnoli after import katex/dist/katex.min.css, the webpack bundle size turn to very large😬, is there a good way to optimize?

@CNFeffery I don't know, sorry :(
maybe limiting the fonts that get imported? I don't know if that works tho

This combination is not working for me: react-markdown, remark-math, rehype-katex. I'm running react-markdown version 8.0.7

Keep getting errors related to type of katex: "Type 'Plugin<[(KatexOptions | undefined)?]>' is not assignable to type 'Pluggable<any[]>'"

Any ideas?