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>
);
},
}}
/>
);
};
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>
);
},
}}
/>
);
};
Hope it will help you!! Thank you
Top comments (0)