Rendering math with react-markdown [UPDATED]

react-markdown-with-math.js

import ReactMarkdown from "react-markdown";
import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";
import "katex/dist/katex.min.css";

const App = (props) => {
  const md = `The equation for softmax function is:\n\n$$\\sigma(z)_j = \\frac{e^{z_j}}{\\sum\\limits_{k=1}^{K}e^{z_k}}$$\n\nwhere $z$ is the input vector of length $K$ and $\\sigma(z)$ is the output vector of length $K$, with each element representing the probability of the input belonging to that class.`;

  return (
    <ReactMarkdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]}>
      {md}
    </ReactMarkdown>
  );
};

export default App;