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

If you are using

import "katex/dist/katex.min.css";

and facing Failed to resolve import "katex/dist/katex.min.css" from "src/components/YourComponent.tsx". Does the file exist?

You can download the katex.min.css file, move the minified css file to your styles directory and manually import it to your react component.

• Download the minified css file

$ wget https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css

• Import it to your component

import '../your/styles/directory/path/katex.min.css';