Can I override renderers? about react-md-editor

[jaywcjlove]

You can have a try. I don't fully understand what you mean.
@TheStarkor

[jaywcjlove]

react-md-editor/website/ExmapleKaTeX.tsx

Lines 23 to 58 in e35ebbe

	<MDEditor
	value={mdKaTeX}
	previewOptions={{
	renderers: {
	inlineCode: ({ children }) => {
	if (/^\$\$(.*)\$\$/.test(children)) {
	const html = katex.renderToString(children.replace(/^\$\$(.*)\$\$/, '$1'), {
	throwOnError: false,
	});
	return <code dangerouslySetInnerHTML={{ __html: html }} />;
	}
	return children;
	},
	code: ({ language, value, children }) => {
	if (language && language.toLocaleLowerCase() === 'katex') {
	const html = katex.renderToString(value, {
	throwOnError: false,
	});
	return (
	<pre>
	<code dangerouslySetInnerHTML={{ __html: html }} />
	</pre>
	);
	}
	const props = {
	className: language ? `language-${language}` : '',
	};
	return (
	<pre {...props}>
	<code {...props}>{value}</code>
	</pre>
	);
	},
	},
	}}
	/>

I don't know what you are going to do.

[TheStarkor]

I want to add a new rendering option like katex to the original renderer.

I tried to find the renderer in the source code, but it failed.

[TheStarkor]

Thank you.. I misunderstood the renderer.

import katex from 'katex';

export var renderers = {
    inlineCode: ({ children }) => {
        if (/^\$\$(.*)\$\$/.test(children)) {
            const html = katex.renderToString(children.replace(/^\$\$(.*)\$\$/, '$1'), {
                throwOnError: false,
            });
            return <code dangerouslySetInnerHTML={{ __html: html }} />
        }
        return <code>{children}</code>;
    },
    code: ({ children, language, value }) => {
        try {
            if (language.toLocaleLowerCase() === 'katex') {
                const html = katex.renderToString(value, {
                    throwOnError: false
                });
                return (
                    <pre>
                        <code dangerouslySetInnerHTML={{ __html: html }} />
                    </pre>
                );
            }

            const props = {
                className: language ? `language-${language}` : '',
            };
            return (
                <pre {...props}>
                    <code {...props}>{value}</code>
                </pre>
            );
        } catch (e) {
            const props = {
                className: language ? `language-${language}` : '',
            };
            return (
            <pre {...props}>
                <code {...props}>{value}</code>
            </pre>
            );
        }
    }
}