"How to identify inline code and block-level code without a language tag? I noticed that the className for block-level code without a language tag is empty, just like inline tags, causing them to be rendered as inline code. Below are my code and output examples."

[Waterkyuu]

const CodeBlock = ({inline ,className, children }) => {

	// console.log(inline)
	// // console.log(className); // 块级代码有语言不为undefined 行内代码和不带语言标签的块级代码为undefined
	// console.log(children);

	const match = /language-(\w+)/.exec(className || ""); // 提取语言
	// console.log(match); // 行内代码和遇到无语言的块级代码块为null 有语言块级代码块 ['language-bash', 'bash']
	
	const codeString = String(children).replace(/\n$/, "");

	// console.log(codeString);
	const language = match?.[1] || "";
	const [isCopied, setIsCopied] = useState(false);


	const handleCopy = async () => {
		try {
			await navigator.clipboard.writeText(codeString);
			setIsCopied(true);
			setTimeout(() => setIsCopied(false), 2000);
		} catch (error) {
			console.error("复制失败:", error);
		}
	};

	// 如果是行内代码块，进入第一个 return
	if (!match) {
		return <code className="bg-blue-100 rounded-md py-1 px-1">{children}</code>;
	}


	return (
		<div>
			<div className="flex justify-between items-center bg-gray-800 h-8 px-4 rounded-t-md">
				<span className="text-gray-300 text-sm">{language || "text"}</span>
				<button
					className="text-sm text-white py-1 px-2 rounded-md hover:bg-gray-600 transition-colors"
					onClick={handleCopy}
				>
					{isCopied ? "✓ 复制成功" : "复制"}
				</button>
			</div>
			<SyntaxHighlighter
				style={vscDarkPlus}
				language={language}
				PreTag="div"
				customStyle={{
					borderRadius: "0 0 8px 8px",
					padding: "16px",
					background: "#1e1e1e",
					marginTop: 0,
				}}
			>
				{codeString}
			</SyntaxHighlighter>
		</div>
	);
};

<ReactMarkdown
	remarkPlugins={[remarkMath]} // 支持 LaTeX 语法
	rehypePlugins={[
		[rehypeKatex, { output: "html", strict: false }], // 禁用公式滚动的独立容器
	]}
	components={{
		code: CodeBlock
	}}
>
	{msg.content}
</ReactMarkdown>

Here is a example

npx create-react-app projectname

This is being identified as inline code. After asking many AIs, they all suggest adding an 'inline' check for judgment. However, when I printed 'inline', I found that it was undefined for all cases.
Here is a more convincing example, which is a demo created by v0

"use client"

import { useState } from "react"
import ReactMarkdown from "react-markdown"
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism"
import remarkGfm from "remark-gfm"
import { Card, CardContent } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Textarea } from "@/components/ui/textarea"

export default function MarkdownDemo() {
  const [markdown, setMarkdown] = useState(`# Markdown Code Example

This is a demonstration of how to render Markdown with \`inline code\` and code blocks.

## Inline Code

You can use \`const greeting = "Hello World!"\` inline within your text.

## Block Code

\`\`\`
// This is a code block
function sayHello() {
  const greeting = "Hello World!";
  console.log(greeting);
  return greeting;
}

// Call the function
sayHello();
\`\`\`

\`\`\`css
/* CSS code block example */
.markdown-content {
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

code {
  background-color: #f1f1f1;
  padding: 0.2em 0.4em;
  border-radius: 3px;
}
\`\`\`

## React Component Example

\`\`\`jsx
import React from 'react';

function Button({ text, onClick }) {
  return (
    <button 
      className="px-4 py-2 bg-blue-500 text-white rounded"
      onClick={onClick}
    >
      {text}
    </button>
  );
}

export default Button;
\`\`\`
`)

  return (
    <div className="container mx-auto p-4 max-w-4xl">
      <h1 className="text-2xl font-bold mb-6">ReactMarkdown Code Block Demo</h1>

      <Tabs defaultValue="preview">
        <TabsList className="mb-4">
          <TabsTrigger value="preview">Preview</TabsTrigger>
          <TabsTrigger value="editor">Editor</TabsTrigger>
        </TabsList>

        <TabsContent value="preview">
          <Card>
            <CardContent className="pt-6">
              <div className="markdown-content prose dark:prose-invert max-w-none">
                <ReactMarkdown
                  remarkPlugins={[remarkGfm]}
                  components={{
                    code({ node, inline, className, children, ...props }) {
                      const match = /language-(\w+)/.exec(className || "")
                      return !inline && match ? (
                        <SyntaxHighlighter style={vscDarkPlus} language={match[1]} PreTag="div" {...props}>
                          {String(children).replace(/\n$/, "")}
                        </SyntaxHighlighter>
                      ) : (
                        <code className="bg-muted px-1.5 py-0.5 rounded text-sm" {...props}>
                          {children}
                        </code>
                      )
                    },
                  }}
                >
                  {markdown}
                </ReactMarkdown>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="editor">
          <Textarea
            value={markdown}
            onChange={(e) => setMarkdown(e.target.value)}
            className="min-h-[500px] font-mono text-sm"
            placeholder="Enter Markdown here..."
          />
        </TabsContent>
      </Tabs>
    </div>
  )
}

Please watch first block code

[wooorm]

This is not how you best get help. You are asking real humans to spend time on your problem here. Please clean your question up. https://github.com/remarkjs/.github/blob/main/support.md

[Waterkyuu]

Inline code and block-level code without language identifiers are recognized the same, which is the issue here.

[JounQin]

What do you mean, they are different types.

https://astexplorer.net/#/gist/86fc78db23a1f66d23e18d953f940f25/latest

[Waterkyuu]

Below is react-markdown official example

<Markdown
	children={markdown}
	components={{
		code(props) {
			const { children, className, node, ...rest } = props
			const match = /language-(\w+)/.exec(className || '')
			return match ? (
				<SyntaxHighlighter
					{...rest}
					PreTag="div"
					children={String(children).replace(/\n$/, '')}
					language={match[1]}
					style={vscDarkPlus}
				/>
			) : (
				<code {...rest} className="bg-blue-100">
					{children}
				</code>
			)
		}
	}}
/>

	const [markdown, setMarkdown] = useState(`# Markdown Code Example

This is a demonstration of how to render Markdown with \`inline code\` and code blocks.

## Inline Code

You can use \`const greeting = "Hello World!"\` inline within your text.

## Block Code

\`\`\`
// This is a code block
function sayHello() {
  const greeting = "Hello World!";
  console.log(greeting);
  return greeting;
}

// Call the function
sayHello();
\`\`\`

\`\`\`css
/* CSS code block example */
.markdown-content {
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

code {
  background-color: #f1f1f1;
  padding: 0.2em 0.4em;
  border-radius: 3px;
}
\`\`\`

## React Component Example

\`\`\`jsx
import React from 'react';

function Button({ text, onClick }) {
  return (
    <button 
      className="px-4 py-2 bg-blue-500 text-white rounded"
      onClick={onClick}
    >
      {text}
    </button>
  );
}

export default Button;
\`\`\`
`)

Here is its page effect

I printed first inline code

I printed first block code

they are same
If you could show me the code how to correctly render block level code without language labels as block level code instead of blue with inline code added is best, if not, quiting this library is right, because it is not compatible with various outputs of LLM，and markdown-it can do it

[Waterkyuu]

if (node?.position && node.position.start.line === node.position.end.line) {
		return <code className="bg-blue-100 rounded-md py-1 px-1">{children}</code>;
	}

	return (
		<div>
			<div className="flex justify-between items-center bg-gray-800 h-8 px-4 rounded-t-md">
				<span className="text-gray-300 text-sm">{language || "text"}</span>
				<button
					className="text-sm text-white py-1 px-2 rounded-md hover:bg-gray-600 transition-colors"
					onClick={handleCopy}
				>
					{isCopied ? "✓ 复制成功" : "复制"}
				</button>
			</div>
			<SyntaxHighlighter
				style={vscDarkPlus}
				language={language}
				PreTag="div"
				customStyle={{
					borderRadius: "0 0 8px 8px",
					padding: "16px",
					background: "#1e1e1e",
					marginTop: 0,
				}}
			>
				{codeString}
			</SyntaxHighlighter>
		</div>
	);

this is answer
but it is humorous to judge

I hope you can address this unnoticed need, provide a better solution, and include it in the user documentation because very few people really pay attention to it

wish can help more people to handle this problem

[lvlingxiao1]

Execellent solution! This should be on react-markdown's home page/README!