Custom Component differentiating inline Code vs block-level Code

[xHomu]

My current custom component for components = { code: (props: any) => SyntaxHighlightCode(props)} couldn't differentiate between inline vs block level code.

What's the best way to differentiate between inline-code vs

block level code?

Which has the undesireable effect of breaking up inline code from its paragraph.

I suspect the answer is leave <code> alone and insert a custom component for <pre> instead?

[wooorm]

Depends on what you want, but generally I’d say, look at props. If you want to highlight code there is a class specifying that language.
Your last paragraph might work too, yeah.

[prmichaelsen]

For posterity, the last paragraph does work.