Natnael B. Haile
Cursor
feat: complete IR Studio with Git LFS tracking for all binary assets and NFCorpus index
fbad523 | 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 }} | |
| /> | |
| ); | |
| }; | |