42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import katex from 'katex';
|
||
|
|
import 'katex/dist/katex.min.css';
|
||
|
|
|
||
|
|
type KaTeXProps = {
|
||
|
|
/** Raw LaTeX source (without `$`/`$$` delimiters). */
|
||
|
|
latex: string;
|
||
|
|
/** Render as block (display) math when true, inline otherwise. */
|
||
|
|
displayMode?: boolean;
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Lazily-loaded KaTeX renderer.
|
||
|
|
*
|
||
|
|
* This module statically imports `katex` and its stylesheet, so both only enter
|
||
|
|
* the bundle via the dynamic `import()` of this file (see the `lazy()` wrapper
|
||
|
|
* in `react-custom-html-parser.tsx`). They are therefore NOT part of the eager
|
||
|
|
* import graph.
|
||
|
|
*
|
||
|
|
* We render with `throwOnError: false`, so KaTeX itself renders a parse error
|
||
|
|
* inline (in its error colour) rather than throwing. The HTML returned by
|
||
|
|
* `renderToString` is produced by our own trusted call from a fixed options
|
||
|
|
* object — it is safe to inject via `dangerouslySetInnerHTML`.
|
||
|
|
*/
|
||
|
|
export default function KaTeX({ latex, displayMode = false }: KaTeXProps) {
|
||
|
|
const html = katex.renderToString(latex, {
|
||
|
|
displayMode,
|
||
|
|
throwOnError: false,
|
||
|
|
output: 'htmlAndMathml',
|
||
|
|
});
|
||
|
|
|
||
|
|
const Wrapper = displayMode ? 'div' : 'span';
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Wrapper
|
||
|
|
// KaTeX output is generated by our own render call (trusted-safe).
|
||
|
|
// eslint-disable-next-line react/no-danger
|
||
|
|
dangerouslySetInnerHTML={{ __html: html }}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|