Repository navigation
Math suport #24
Description
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.
Activity