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

@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?

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';