react-katex parses equation blocks, but doesn't render

Question

I'm trying to display equations using react-katex. The output successfully parses equations enclosed inside $dollar signs$, I'm still seeing the LaTeX code. I don't see them rendered as equations.

Minimum working example:

import React from 'react';
import ReactMarkdown from 'react-markdown';
import { InlineMath, BlockMath } from 'react-katex';
import remarkMath from 'remark-math';
import 'katex/dist/katex.min.css';

const App = () => {
  const markdownText = `
This is an inline equation: $a^2 + b^2 = c^2$

This is a block equation:

$$
E = mc^2
$$
  `;

  return (
    <div>
      <ReactMarkdown 
        remarkPlugins={[remarkMath]}
        components={{
          inlineMath({value}) {
            return <InlineMath math={value} />;
          },
          math({value}) {
            return <BlockMath math={value} />;
          }
        }}
      >
        {markdownText}
      </ReactMarkdown>
<span class="katex">
  <span class="katex-mathml">The KaTeX stylesheet is not loaded!</span>
  <span class="katex-version rule">KaTeX stylesheet version: </span> {/* I have verified that the stylesheet is loaded */}
</span>
    </div>
  );
};

export default App;

Here's what the output looks like:

I know KaTeX is doing something, because the HTML created by react-katex looks like this:

<p>This is an inline equation: <code class="language-math math-inline">a^2 + b^2 = c^2</code></p>
<p>This is a block equation:</p>
<pre><code class="language-math math-display">E = mc^2</code></pre>

<span class="katex"><span class="katex-mathml">The KaTeX stylesheet is not loaded!</span><span class="katex-version rule">KaTeX stylesheet version: </span> </span>

KaTeX knows I'm using equations. It has successfully identified which equations it's supposed to render. It's just not rendering them.

What am I doing wrong?

Answer 1

I found a solution,

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

const _mapProps = (props) => ({...props,
    remarkPlugins: [RemarkMathPlugin],
    rehypePlugins: [rehypeKatex]});

const Markdown = (props) => <ReactMarkdown {..._mapProps(props)} />;

export default Markdown;

This creates a Markdown component which admits LaTeX and Markdown. This uses rehype-katex instead of react-katex.