Блог

Привет, я успешно добавил синтаксис react hightlight в свой проект, который использует gatsbyjs и strapi, из strapi содержимое было отформатировано в markdown, поэтому я добавил react-markdown и react-syntax-hightlight обработал рендеринг и подсветку синтаксиса в своем приложении

вот из того, что я реализовал до сих пор

Article.js

 import React 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 rehypeRaw from "rehype-raw"
import remarkGfm from "remark-gfm"
import remarkSlug from "remark-slug"
import "../../../styles/language.css"

const ArticleContent = ({ content }) => {
  return (
    <ReactMarkdown
      remarkPlugins={[remarkGfm, remarkSlug]}
      rehypePlugins={[rehypeRaw]}
      children={content}
      linkTarget="_blank"
      transformImageUri={uri =>
        uri.startsWith("http") ? uri : `${process.env.GATSBY_ROOT_URL}${uri}`
      }
      components={{
        code({ node, inline, className, children, ...props }) {
          const match =
            className !== undefined
              ? className.replace("language-", "")
              : "code"
          return !inline amp;amp; match ? (
            <div className="relative">
              {(match !== "shell-session" || match === null) amp;amp; (
                <p
                  className={`code-hightlight language-${match} font-jost text-sm font-light tracking-wide rounded-b absolute right-2 -top-5 px-2 py-1 bg-tertiary`}
                >
                  {match}
                </p>
              )}
              <SyntaxHighlighter
                children={String(children).replace(/n$/, "")}
                style={vscDarkPlus}
                language={match}
                PreTag="div"
                {...props}
              />
            </div>
          ) : (
            <code className={`rounded-md ${className}`} {...props}>
              {children}
            </code>
          )
        },
      }}
    />
  )
}

export default ArticleContent
 

здесь я реализовал последнюю уценку react и описал, как добавить подсветку синтаксиса выше.
вот как это выглядит

Из этого я хочу добавить какой-нибудь заголовок или имя файла, например App.js перед отображением подсветки синтаксиса. Поскольку при этом используется уценка, так как же мне этого добиться?

вот текущая отформатированная уценка для отображения этого синтаксиса выше

``jsx
const App = () => {
const [todos, setTodos] = Состояние использования([
 { текст: "Купить еду", заполнено: ложь },
{ текст: "Научиться реагировать", заполнено: истина },
{ текст: "Создать приложение для выполнения задач", заполнено: истина }
 ]);

 //...
}
```