Reamrk- components code block not rendering...

[AbhayaShankar]

 const customRenderers = {
code({ language, value }) {
      return (
        <SyntaxHighlighter language={language} style={atomDark}>
          {value}
        </SyntaxHighlighter>
      );
    },
  };

<ReactMarkdown
        className={classes.markdownContent}
        components={customRenderers}
        children={content}
      />

All though every other content is showing up but the code block is empty

What could have gone wrong?

[ChristianMurphy]

Welcome @AbhayaShankar!
Sorry you ran into a spot of trouble.

A good starter would be following the example in the react-markdown readme https://github.com/remarkjs/react-markdown#use-custom-components-syntax-highlight

import React from 'react'
import ReactDom from 'react-dom'
import ReactMarkdown from 'react-markdown'
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
import {dark} from 'react-syntax-highlighter/dist/esm/styles/prism'

// Did you know you can use tildes instead of backticks for code in markdown? ✨
const markdown = `Here is some JavaScript code:

~~~js
console.log('It works!')
~~~
`

ReactDom.render(
  <ReactMarkdown
    children={markdown}
    components={{
      code({node, inline, className, children, ...props}) {
        const match = /language-(\w+)/.exec(className || '')
        return !inline && match ? (
          <SyntaxHighlighter
            {...props}
            children={String(children).replace(/\n$/, '')}
            style={dark}
            language={match[1]}
            PreTag="div"
          />
        ) : (
          <code {...props} className={className}>
            {children}
          </code>
        )
      }
    }}
  />,
  document.body
)

If the issue persists, consider sharing a reproducible example of what you are seeing.
Using a codesandbox or stackblitz as a starter.
It's unclear from what you shared, what libraries, what versions of libraries, and what content you are testing with.

[ChristianMurphy]

Again

If the issue persists, consider sharing a reproducible example of what you are seeing.
Using a codesandbox or stackblitz as a starter.
It's unclear from what you shared, what libraries, what versions of libraries, and what content you are testing with.

You haven't provided enough information for people to be able to offer much advise.
Help the community help you, by providing enough detail for people to offer tangible suggestions.

[AbhayaShankar]

Sure I will do that

[AbhayaShankar]

Given a markdown file :

NEXTJS

NEXT Js is the React framework for production - it makes building fullstack React apps and sites a breeze and ships with built-in SSR/SSG.

export function getStaticPaths() {
  const postFileNames = getPostsFiles();

  const slugs = postFileNames.map((file) => file.replace(/\.md$/, ""));

  return {
    paths: slugs.map((slug) => ({ params: { slug: slug } })),
    fallback: "blocking",
  };
}   

I am developing a blog app for which I want to render code block UI into some styled block for which I have used react-syntax-highlighter and react-markdown for Markdown files.

I then read through these files and render the content on UI.

import React from "react";
import ReactMarkdown from "react-markdown";
import PostHeader from "./PostHeader";
import classes from "./PostContent.module.css";
import Image from "next/image";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { atomDark } from "react-syntax-highlighter/dist/cjs/styles/prism";

const PostContent = ({ post }) => {
  const { title, image, content, slug } = post;

  const imagePath = `/posts/${slug}/${image}`;

  const customRenderers = { 
    code({ language, value }) {
      return (
        <SyntaxHighlighter language={language} style={atomDark}>
          {value}
        </SyntaxHighlighter>
      );
    },
  };

  return (
    <article className={classes.content}>
      <PostHeader title={title} image={imagePath} />
      <ReactMarkdown
        className={classes.markdownContent}
        components={customRenderers}
        children={content}
      />
    </article>
  );
};

THE ERROR THAT I WAS FACING IS: THE CODE BLOCK IS NOT RENDERING EXCEPT REMAINING THINGS ARE RENDERING JUST FINE...

[ChristianMurphy]

That still is missing a fair bit of detail, aim to create a minimal reproducible example https://stackoverflow.com/help/minimal-reproducible-example
and share it using a sandbox like https://next.new

---

In the absence of that.
It sounds like you are trying to do server side rendering with Next js + server components?
If so, you are likely running into an issue in the syntax highlighter itself, such as react-syntax-highlighter/react-syntax-highlighter#493, react-syntax-highlighter/react-syntax-highlighter#263 (comment), react-syntax-highlighter/react-syntax-highlighter#509

Next seems to recommend using prism for syntax highlighting markdown code block in SSR mode https://nextjs.org/blog/markdown and https://nextjs-prism.vercel.app/prism