File size: 940 Bytes
fbad523 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | import React, { useMemo } from 'react';
import katex from 'katex';
interface MathFormulaProps {
math: string;
displayMode?: boolean;
className?: string;
}
export const MathFormula: React.FC<MathFormulaProps> = ({
math,
displayMode = true,
className = '',
}) => {
const renderedHtml = useMemo(() => {
try {
return katex.renderToString(math, {
displayMode,
throwOnError: false,
output: 'htmlAndMathml',
});
} catch (err) {
console.warn('KaTeX rendering error:', err);
return null;
}
}, [math, displayMode]);
if (!renderedHtml) {
return (
<code className={`font-mono text-xs ${className}`}>
{math}
</code>
);
}
return (
<div
className={`katex-math-wrapper overflow-x-auto ${displayMode ? 'text-center my-1.5 py-1' : 'inline-block'} ${className}`}
dangerouslySetInnerHTML={{ __html: renderedHtml }}
/>
);
};
|