fix: dynamically import katex
This commit is contained in:
parent
bdf34bbbbf
commit
6ada79017a
1 changed files with 18 additions and 14 deletions
|
@ -1,5 +1,5 @@
|
|||
import { Alert } from '@mantine/core';
|
||||
import katex, { ParseError } from 'katex';
|
||||
import type { ParseError } from 'katex';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
import 'katex/dist/katex.min.css';
|
||||
|
@ -19,10 +19,13 @@ export default function KaTeX({ code, ...props }) {
|
|||
</Alert>
|
||||
);
|
||||
};
|
||||
// dynamic
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const katex = await import('katex');
|
||||
try {
|
||||
const html = katex.renderToString(code, {
|
||||
const html = katex.default.renderToString(code, {
|
||||
displayMode: true,
|
||||
throwOnError: true,
|
||||
errorColor: '#f44336',
|
||||
|
@ -36,6 +39,7 @@ export default function KaTeX({ code, ...props }) {
|
|||
throw e;
|
||||
}
|
||||
}
|
||||
})();
|
||||
}, [rendered, error, code]);
|
||||
|
||||
if (error) return error;
|
||||
|
|
Loading…
Reference in a new issue