Math suport

[randresf-linc]

Hello there, great lib!!!

When using the Markdown component, it seems like I can pass the InlineMath or BlockMath component to it ( I am using react-katex) but its not picking that up in the final render and the values with $...math...$ are displayed like that. DId I miss something or maybe this is not supported yet?

This is what I am doing:

import { BlockMath, InlineMath } from 'react-katex';
import { AnimatedMarkdown } from 'flowtoken';
import 'flowtoken/dist/styles.css';
...

<AnimatedMarkdown
      animation="fadeIn"
      animationDuration="0.5s"
      animationTimingFunction="ease-in-out"
      content={content}
      customComponents={{
        math: ({ value }: { value: string }) => <BlockMath>{value}</BlockMath>,
        inlineMath: ({ value }: { value: string }) => <InlineMath>{value}</InlineMath>
      }}
    />

The way i have it working is this:

<ReactMarkdown
      components={{
        math: ({ value }: { value: string }) => <BlockMath>{value}</BlockMath>,
        inlineMath: ({ value }: { value: string }) => <InlineMath>{value}</InlineMath>
      }}
      rehypePlugins={[rehypeRaw as any, rehypeSanitize, rehypeKatex]}
      remarkPlugins={[remarkMath, [remarkGfm, { singleTilde: false }]]}
    >
      {processedValue}
    </ReactMarkdown>

Content used:

Euler's formula is a fundamental equation in complex analysis that establishes a deep relationship between trigonometric functions and exponential functions. It is expressed as:

$$
e^{ix} = \cos(x) + i\sin(x)
$$

where:
- $e$ is the base of the natural logarithm (approximately equal to 2.71828),
- $i$ is the imaginary unit (where $i^2 = -1$),
- $x$ is a real number,
- $\cos(x)$ and $\sin(x)$ are the cosine and sine functions, respectively.