1

how are you? I'm building a blog with ReactMarkdown, and I want to render a custom component for the code blocks:

<ReactMarkdown
   children={content}
   rehypePlugins={[rehypeRaw]}
   components={{
     code({ node, inline, children, className, ...props }) {
          return <PrismHighlighter children={children}  {...props} />;
          }
    }}
/>

My 'PrismHighlighter' file consists in the following:

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { nightOwl } from 'react-syntax-highlighter/dist/cjs/styles/prism';

const SyntaxHighlight = ({ props, children }) => (
  <SyntaxHighlighter style={nightOwl} language="javascript" showLineNumbers {...props}>
    {children}
  </SyntaxHighlighter>
);

export default SyntaxHighlight;

The problem is the following: ReactMarkdown is receiving a string (what is okay), like this:

nucleus_dataset =
nucleus.create_dataset("PennFudan") DATASET_ID =
nucleus_dataset.info()['dataset_id'] # Save unique ID for future use

def format_img_data_for_upload(img_dir: str):   """Instantiates a
Nucleus DatasetItem for all images in the PennFudan dataset.

  Parameters   ----------   img_dir : str
      The filepath to the image directory

  Returns   -------   List[DatasetItem]
      A list of DatasetItem that can be uploaded via the Nucleus API   """   img_list = []   for img_filename in os.listdir(img_dir):
      img_id = img_filename.split('.')[0]
      item = DatasetItem(
          image_location=os.path.join(img_dir, img_filename), 
          reference_id=img_id,
      )
      img_list.append(item)   return img_list

img_list = format_img_data_for_upload(IMG_DIR)

response = nucleus_dataset.append(img_list)

But ReactMarkdown sends to PrismHighlighter an array of objects, like this: example of what ReactMarkdown sends

This results of PrismHighlighter avoiding several lines and showing only half or less of the code, like this: example

So, does anyone knows what happening here? I'm struggling with this for days now. Thanks!

  • Hi, have you try to use the official exemple ? https://github.com/remarkjs/react-markdown#use-custom-components-syntax-highlight – BENARD Patrick Apr 18 '22 at 04:14
  • Hi @BENARDPatrick, yes! But the problem is that the content is coming from a CMS. And the codeblocks are written in html, so ReactMarkdown is receiving a string with html tags (eg: my code here), which works, but sending to ReactSyntaxHighlighter an array of objects... – Emiliano Yaryura Apr 18 '22 at 04:21
  • Ok, so little question, why are you using a library that transform markdown to react component ? Maybe just using a standard markdown to HTML string should do the job no ? https://www.npmjs.com/package/marked – BENARD Patrick Apr 18 '22 at 04:24
  • @BENARDPatrick but how do I render a react-syntax-highlighter component for the code blocks? – Emiliano Yaryura Apr 18 '22 at 04:27
  • First you create a function that convert markdown to html, and once done, you give the result to SyntaxHighlighter as a uniq child. That's all. – BENARD Patrick Apr 18 '22 at 04:29
  • @BENARDPatrickm\ yes, but the markdown file is large... it's not only code. So I would have to identify the content between different tags and render different components for those... that's why I chose ReactMarkdown at first – Emiliano Yaryura Apr 18 '22 at 04:36

0 Answers0