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)