Incorrect Languageless Code Block Rendering in Example

[JamesonRGrieve]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

9.0.X

Link to runnable example

No response

Steps to reproduce

The code component in components no longer accepts inline as a prop. In your example, you are using className to detect whether the code is inline or a block. This produces the below behaviour when no language is provided which deviates from standard Markdown rendering.

Expected behavior

This line.

Should be rendered as above, in a block, even without providing a language. When a language is not provided, className comes through as undefined - the same as an inline code. This can be partially escaped by using .includes('\n') (not shown in the demo code), although that adds complexity.

Actual behavior

Instead, languageless code is rendered like this, even when enclosed in triple quotes when using the demo snippet. Snippet should be updated to include the necessary .includes('\n'), or inline prop should be brought back.

Runtime

Node v17

Package manager

npm 8

OS

Windows

Build and bundle tools

Next.js

[ChristianMurphy]

@JamesonRGrieve sorry you ran into some confusion.
Which example are you referring to?
I assume https://github.com/remarkjs/react-markdown?tab=readme-ov-file#use-custom-components-syntax-highlight ?

When I copy it in with a code block with no language it works fine https://stackblitz.com/edit/github-6nizfy?file=src%2Fapp.tsx

[github-actions]

Hi! Thanks for taking the time to contribute! This has been marked by a maintainer as needing a reproduction: It’s not yet clear whether this is a problem. Here are a couple tips:

• Thoroughly document how to reproduce the problem, in steps or with code
• Don’t link to your complete project: make the repro as tiny as possible, preferrably with only the problematic project in question
• Make sure you’re on the latest versions of projects (and node/npm/yarn!)
• The best issue report is a failing test proving it

Thanks,
— bb

[JamesonRGrieve]

Hi @ChristianMurphy

Try these two strings in your snippet:

const markdownSourceWorks = '```js\nconsole.log("Hello, World!");\n```';
const markdownSourceDoesntWork = '```\nconsole.log("Hello, World!");\n```';

The first one includes the js language, so it works fine. The second one does not, and it renders as inline despite being a multiline codeblock.

Rendered in GH for reference:

console.log("Hello, World!");

console.log("Hello, World!");

[ChristianMurphy]

@JamesonRGrieve could you share a runnable example?
I tried the code you shared which is labeled doesn't work and it works in a sandbox https://stackblitz.com/edit/github-6nizfy-nbnz4p?file=src%2Fapp.tsx

[ChristianMurphy]

My recommendations:

• make sure you are running the latest version of react-markdown and react-syntax-highlighter
• make sure you haven't made other unrelated changes which could break the rendering
• make sure your style sheet isn't changing how code blocks are rendered

[JamesonRGrieve]

@ChristianMurphy It doesn't work in the link you shared either, as previously stated, it is rendering inline instead of as a block. See my previous comment, a multi-line triple-tick code block without a language should be rendered as a block not inline.

https://stackblitz.com/edit/github-6nizfy-xl25qk?file=src%2Fapp.tsx

Major release 8.X.X did not have this problem because of the inline prop. See here.

The logic in that demo doesn't work 100% correctly either, but simply using the inline prop makes it work properly.

[ChristianMurphy]

It is still a block, it has the <pre> tag wrapping <code>.
But I think what you're getting at is you want it routed to the custom component?
Is that correct?

[JamesonRGrieve]

The entire purpose of the demo code is to separate inline from block rendering, is it not? Hence the use of the inline prop in 8.X.X documentation?

My request is for a simple way to do that again thay doesn't involve querying className for language AND checking for newline characters.

The old inline prop was concise and effective.