When I was using react-markdown, the example code, something like that didn't render correctly

[quirkybird]

When I'm using react-markdown, I'm not doing what I want, maybe there's something wrong with the way I'm using it, but everything else is rendering fine except the `` block, please show me the correct way, I guess there's something wrong with string concatenation

[ChristianMurphy]

@quirkybird please read the support guide for how to ask questions in such a way others can actually help.
https://github.com/remarkjs/.github/blob/main/support.md

---

Asking quality questions

Help us help you!
Spend time framing questions and add links and resources.
Spending the extra time up front can help save everyone time in the long run.
Here are some tips:

• Talk to a duck!
• Don’t fall for the XY problem
• Search to find out if a similar question has been asked
• Try to define what you need help with:
  • Is there something in particular you want to do?
  • What problem are you encountering and what steps have you taken to try
    and fix it?
  • Is there a concept you don’t understand?
• Provide sample code, such as a CodeSandbox or video, if possible
• Screenshots can help, but if there’s important text such as code or error
  messages in them, please also provide those as text
• The more time you put into asking your question, the better we can help you

[quirkybird]

This is my markdown string：

this is my markdown rendered:

Apparently he didn't render it correctly

[wooorm]

It works perfectly. You just have CSS (tailwind) that styles code with backticks. Change your CSS

[quirkybird]

You mean it has no style by default

[wooorm]

Tailwind has a style by default. Use the inspector in your devtools.

[quirkybird]

It turns out that tailwind style affected it. Thank you for solving the problem I was confused about for two days @wooorm

[quirkybird]

@wooorm ，I want to use the original styles of 'react-markdown', but I don't know how to do it now

[flazouh]

Right, markdown is plain unstyled HTML by default. You can add your own styles. If you want it to look like GitHub consider https://github.com/sindresorhus/github-markdown-css Or you can import or create any other styles you want.

Styling is not something react-markdown dictates.

And to apply those styles after having them in your style.css, do you need to do anything special in the options ? I have this piece of code:

import Markdown from 'react-markdown'
import remarkGfm from 'remark-gfm'

export function ExplanationComponent(props: TranslationPopoverProps) {
  return (
    <div className="max-h-40 max-w-[25em] overflow-y-auto rounded-md  p-1 px-2.5 text-left font-fluent text-base text-white">
      <Markdown remarkPlugins={[remarkGfm]}>{explanation}</Markdown>
    </div>
  )
}

[ChristianMurphy]

Nothing special, follow the usual approach to adding CSS for the framework you are using.
Then make sure none of your other libraries or custom styles conflict with them.

[flazouh]

Damn, I'm using it in the context of a chrome extension, I think the page's css might conflict with it, maybe there is a trick to be done here with tailwind

I see in the github css there is for exemple:

.markdown-body code,
.markdown-body tt {
padding: .2em .4em;
margin: 0;
font-size: 85%;
white-space: break-spaces;
background-color: var(--color-neutral-muted);
border-radius: 6px;
}

And I need to add markdown-body to the elements like that :

<Markdown
        remarkPlugins={[remarkGfm]}
        components={{
          p: ({ children }) => (
            <p className="markdown-body text-white">{children}</p>
          ),
          ul: ({ children }) => (
            <ul className="markdown-body text-white">{children}</ul>
          ),
          ol: ({ children }) => (
            <ol className="markdown-body text-white">{children}</ol>
          ),
          li: ({ children }) => (
            <li className="markdown-body text-white">{children}</li>
          ),
          blockquote: ({ children }) => (
            <blockquote className="text-white">{children}</blockquote>
          ),
          code: ({ children }) => (
            <code className="markdown-body text-white">{children}</code>
          ),
        }}
      >
        {explanation}
      </Markdown>

For it to work ?

[ChristianMurphy]

No, see the readme for github-markdown-css, you need a markdown-body classname wrapping all the content (outside/around react-markdown).
https://github.com/sindresorhus/github-markdown-css?tab=readme-ov-file#usage

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="github-markdown.css">
<style>
	.markdown-body {
		box-sizing: border-box;
		min-width: 200px;
		max-width: 980px;
		margin: 0 auto;
		padding: 45px;
	}

	@media (max-width: 767px) {
		.markdown-body {
			padding: 15px;
		}
	}
</style>
<article class="markdown-body">
	<h1>Unicorns</h1>
	<p>All the things</p>
</article>