React-уценка и реактивная подсветка синтаксиса

Question

как дела? Я создаю блог с ReactMarkdown и хочу отобразить пользовательский компонент для блоков кода:

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

Мой файл PrismHighlighter состоит из следующего:

      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;

Проблема в следующем: ReactMarkdown получает строку (что в порядке), например:

       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)

Но ReactMarkdown отправляет в PrismHighlighter массив объектов, например такой:пример того, что отправляет ReactMarkdown

Это приводит к тому, что PrismHighlighter избегает нескольких строк и показывает только половину или меньше кода, например :

Итак, кто-нибудь знает, что здесь происходит? Я борюсь с этим уже несколько дней. Спасибо!

Answer 1

Я столкнулся с аналогичной проблемой с последней версиейreact-markdown. Я написал подробный блог по этой проблеме здесь.

вы можете создать новыйMarkdownRendererкомпонент, который это делает

      import React from 'react';
import Markdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { dracula } from 'react-syntax-highlighter/dist/cjs/styles/prism';

type MarkdownRendererProps = {
  children: string;
};

export function MarkdownRenderer({ children: markdown }: MarkdownRendererProps) {
  return (
    <Markdown
      remarkPlugins={[remarkGfm]}
      rehypePlugins={[rehypeRaw]}
      components={{
        code({ node, inline, className, children, ...props }: any) {
          const match = /language-(\w+)/.exec(className || '');

          return !inline && match ? (
            <SyntaxHighlighter style={dracula} PreTag="div" language={match[1]} {...props}>
              {String(children).replace(/\n$/, '')}
            </SyntaxHighlighter>
          ) : (
            <code className={className} {...props}>
              {children}
            </code>
          );
        },
      }}
    >
      {markdown}
    </Markdown>
  );
}