KaTeX Preview example does not work

[lrprawira]

Hello,

I tried the Support Custom KaTeX Preview example but it did not work because the children for ``` this code block ``` may have multiple children. Regular multi-line code blocks also fail because only the first child gets passed.

I came up with a solution of traversing down each of the tree node. This finally works but I am not sure if there is no better solution to this since the typing and scrolling performance just feels so sluggish. Is there any way to improve this?

                components: {
                    code: ({inline, children = [], className}) => {
                        let shouldRenderKatex = false;
                        let customRenderText = '';
                        interface BranchType {
                            props: {
                                children: BranchType[]
                            }
                        }
                        type BranchNodeType = string|BranchType;

                        const traverseTree = (branch: BranchNodeType[] = children) => {
                            for (const child of branch) {
                                if (typeof child === 'string') {
                                    customRenderText += child;
                                    continue;
                                }
                                traverseTree(child['props']['children']);
                            }
                        }
                        if (inline && /^\$\$(.*)\$\$/.test(children[0] as string ?? '')) {
                            customRenderText = (children[0] as string).replace(/^\$\$(.*)\$\$/, '$1');
                            shouldRenderKatex = true;
                        } else if (/^language-KaTeX/.test(className as string ?? '')) {
                            traverseTree();
                            shouldRenderKatex = true;
                        }
                        if (shouldRenderKatex) {
                            const html = katex.renderToString(customRenderText ?? '', {
                                throwOnError: false,
                            });
                            return <code dangerouslySetInnerHTML={{ __html: html }} />;
                        }
                        return <code className={String(className)}>{children}</code>;
                    },
                },

[jaywcjlove]

@ccxex29 I don't have a better solution. You are welcome to develop a better solution to share with everyone.