Open jsilva-js opened 1 month ago
@jsilva-js You can refer to this example.
import React from "react";
import MDEditor from '@uiw/react-md-editor';
import { getCodeString } from 'rehype-rewrite';
import katex from 'katex';
import 'katex/dist/katex.css';
const mdKaTeX = `This is to display the
\`\$\$\c = \\pm\\sqrt{a^2 + b^2}\$\$\`
in one line
\`\`\`KaTeX
c = \\pm\\sqrt{a^2 + b^2}
\`\`\`
`;
export default function App() {
const [value, setValue] = React.useState(mdKaTeX);
return (
<MDEditor
value={value}
onChange={(val) => setValue(val)}
previewOptions={{
components: {
code: ({ children = [], className, ...props }) => {
if (typeof children === 'string' && /^\$\$(.*)\$\$/.test(children)) {
const html = katex.renderToString(children.replace(/^\$\$(.*)\$\$/, '$1'), {
throwOnError: false,
});
return <code dangerouslySetInnerHTML={{ __html: html }} style={{ background: 'transparent' }} />;
}
const code = props.node && props.node.children ? getCodeString(props.node.children) : children;
if (
typeof code === 'string' &&
typeof className === 'string' &&
/^language-katex/.test(className.toLocaleLowerCase())
) {
const html = katex.renderToString(code, {
throwOnError: false,
});
return <code style={{ fontSize: '150%' }} dangerouslySetInnerHTML={{ __html: html }} />;
}
return <code className={String(className)}>{children}</code>;
},
},
}}
/>
);
}
type MarkdownPreviewProps = {
///...
pluginsFilter?: (type: 'rehype' | 'remark', plugin: PluggableList) => PluggableList;
rehypeRewrite?: RehypeRewriteOptions['rewrite'];
}
@jsilva-js You can also use rehypeRewrite to redefine the HTML.
hello {|note|}
displays a custom html
hello [html]