DEV Community

Cover image for SyntaxHighlighter does not highlight the code block when used with ReactMarkdown
Mudit Choudhary
Mudit Choudhary

Posted on

SyntaxHighlighter does not highlight the code block when used with ReactMarkdown

I faced this little bug with SyntaxHighlighter does not highlight the markdown code block.

const Test = () => {
    const markdown = `Here is some JavaScript code:

    ~~~js
    console.log('It works!')
    ~~~
    `;
    return (
        <ReactMarkdown
            children={markdown}
            components={{
                code(props) {
                    console.log(props);
                    const { children, className, node, ...rest } = props;
                    const match = /language-(\w+)/.exec(className || "");
                    return match ? (
                        <SyntaxHighlighter
                            {...rest}
                            children={String(children).replace(/\n$/, "")}
                            language={match[1]}
                            PreTag="div"
                        />
                    ) : (
                        <code {...rest} className={className}>
                            {children}
                        </code>
                    );
                },
            }}
        />
    );
};
Enter fullscreen mode Exit fullscreen mode

I have this simple component that renders a mark-down code block as JSX. But the SyntaxHighlighter was not highlighting the code. I found that the issue was that the props argument in code function does not have any className property due to which the match does not have the language we specified in the markdown. Due to this the if condition is always false and the default <code> block always gets rendered.

Solution
I updated the code a bit and instead of using the className to know which language is used in the markdown code string. I extract the language from the children property, that is the content we have in the markdown string.

const Test = () => {
    const markdown = `Here is some JavaScript code:

    ~~~js
    console.log('It works!')
    ~~~
    `;
    return (
        <ReactMarkdown
            children={markdown}
            components={{
                code(props) {
                    console.log(props);
                    const { children, className, node, ...rest } = props;
                    const codeValue = props.children; // Get the code block content
                    console.log(codeValue);
                    const match = /~~~(\w+)/.exec(codeValue); // Use a regex to extract the language
                    console.log(match);
                    return match ? (
                        <SyntaxHighlighter
                            {...rest}
                            children={String(children).replace(/\n$/, "")}
                            language={match[1]}
                            PreTag="div"
                        />
                    ) : (
                        <code {...rest} className={className}>
                            {children}
                        </code>
                    );
                },
            }}
        />
    );
};
Enter fullscreen mode Exit fullscreen mode

Hope it will help you!! Thank you

Image of Datadog

Master Mobile Monitoring for iOS Apps

Monitor your app’s health with real-time insights into crash-free rates, start times, and more. Optimize performance and prevent user churn by addressing critical issues like app hangs, and ANRs. Learn how to keep your iOS app running smoothly across all devices by downloading this eBook.

Get The eBook

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay