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?

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