React-markdown: Inline mathematics

[rgbkrk]

Any tips on how I could modify react-markdown to parse additional nodes out? In particular, if I found an occurence of $$\int_0^\infty x^2 dx$$ in the text, I'd like to rely on react-katex to render like so:

 React.render(<BlockMath>\int_0^\infty x^2 dx</BlockMath>,
                document.getElementById('math'));

[rexxars]

Sorry, I don't have any clear picture on how you would be able to achieve this right now. I'd love for the parser to be more flexible and able to add custom elements like this, but as of now I'm using commonmark as the parser, which is pretty specific on what it picks up. I'd love to revisit this at some point if I switch parsers.

[epatters]

In case it's helpful to anyone, I'll note that inline math is now possible since this package moved from commonmark to remark and enabled remark plugins. I just got math rendering working using the remark-math plugin and react-mathjax for rendering. It would be straightforward to use react-katex as well.

In TypeScript, try something like this:

import * as React from "react";
import * as ReactMarkdown from "react-markdown";
import MathJax from "@matejmazur/react-mathjax";
import RemarkMathPlugin = require("remark-math");

export const MarkdownRender = (props: ReactMarkdown.ReactMarkdownProps) => {
  const newProps = {
    ...props,
    plugins: [
      RemarkMathPlugin,
    ],
    renderers: {
      ...props.renderers,
      math: (props: {value: string}) =>
        <MathJax.Node>{props.value}</MathJax.Node>,
      inlineMath: (props: {value: string}) =>
        <MathJax.Node inline>{props.value}</MathJax.Node>,
    }
  };
  return (
    <MathJax.Context input="tex">
      <ReactMarkdown {...newProps} />
    </MathJax.Context>
  );
};

[rgbkrk]

Thanks @epatters -- I think I'll use exactly this setup along with the mathjax setup you outline.

[rgbkrk]

As of https://github.com/nteract/nteract/pull/2350 we've been able to do inline mathematics with this package because of the remark plugins. Thank you so much @epatters and @rexxars!

[flavioschneider]

In case that you want to use KaTex you can use the following component Markdown.js:

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

function Markdown(props) {
    const newProps = {
        ...props,
        plugins: [
            RemarkMathPlugin,
        ],
        renderers: {
            ...props.renderers,
            math: (props) => <BlockMath math={props.value} />,
            inlineMath: (props) => <InlineMath math={props.value} />
        }
    };
    return (
        <ReactMarkdown {...newProps} />
    );
};

export default Markdown;

then to use the component just import it and write <Markdown source={markdown} />.

For inline math: $x^2$
For block math:

$$ 
\sum_{i=1}^n i^2
$$