No Difference between Code Block and inline code

[thatanjan]

I am using next-mdx-remote 4.0.0 version. When I try to add syntax highlights to code it doesn't distinguish between a code block and an inline code.
I am using prism-react-renderer for syntax highlight with the following code.

// CodeBlock.jsx

import React from 'react'
import Highlight, { defaultProps } from 'prism-react-renderer'
import vsDark from 'prism-react-renderer/themes/vsDark'

const CodeBlock = ({ children, className }) => {
	const language = className ? className.replace(/language-/, '') : ''

	return (
		<Highlight
			{...defaultProps}
			theme={vsDark}
			code={children.trim()}
			language={language}
		>
			{({ className, style, tokens, getLineProps, getTokenProps }) => (
				<pre className={className} style={{ ...style, padding: '20px' }}>
					{tokens.map((line, i) => (
						<div key={i} {...getLineProps({ line, key: i })}>
							{line.map((token, key) => (
								<span key={key} {...getTokenProps({ token, key })} />
							))}
						</div>
					))}
				</pre>
			)}
		</Highlight>
	)
}

export default CodeBlock

My mdx code

MDX component object

import CodeBlock from './CodeBlock'

const components = {}

components.code = CodeBlock

export default components

Result

Expected Result

It works with the version 3.0.8 but not with the 4.0.0 version

Thanks in advance.

[ayuhito]

Can confirm this is affecting my project too. If you don't use the ternary operator for the variable language, it outright breaks because inline code returns className as undefined.

[alexcarpenter]

@thatanjan Try switching to:

import CodeBlock from './CodeBlock'

const components = {}

components.pre = CodeBlock

export default components

[BRKalow]

Note that MDX was upgraded to v2 as part of this, which was a breaking change and requires changes in how you author content.

See the upgrade guide here: https://mdxjs.com/migrating/v2/#update-mdx-content

Of note:

The special component name inlineCode was removed, we recommend to use pre for the block version of code, and code for both the block and inline versions

[thatanjan]

Finally, it is working. Thank you so much @BRKalow and @alexcarpenter.
I switched the code tag to pre tag for CodeBlock.

import CodeBlock from './CodeBlock'

const components = {}

components.pre = CodeBlock

export default components

I also changed the prism code. Now it is getting the code from the nested code tag.

import React from 'react'
import Highlight, { defaultProps } from 'prism-react-renderer'
import vsDark from 'prism-react-renderer/themes/vsDark'

const CodeBlock = ({ children }) => {
	if (!children || children.type !== 'code') return null

	const {
		props: { className, children: code = '' },
	} = children

	const language = className ? className.replace(/language-/, '') : ''

	return (
		<Highlight
			{...defaultProps}
			theme={vsDark}
			code={code.trim()}
			language={language}
		>
			{({ className, style, tokens, getLineProps, getTokenProps }) => (
				<pre className={className} style={{ ...style, padding: '20px' }}>
					{tokens.map((line, i) => (
						<div key={i} {...getLineProps({ line, key: i })}>
							{line.map((token, key) => (
								<span key={key} {...getTokenProps({ token, key })} />
							))}
						</div>
					))}
				</pre>
			)}
		</Highlight>
	)
}

export default CodeBlock