Как добавить имя файла или заголовок в Hightligting синтаксиса реакции

Question

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

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

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 && match ? (
            <div className="relative">
              {(match !== "shell-session" || match === null) && (
                <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

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

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

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

``jsx
 const App = () => {
  const [todos, setTodos] = useState([
    {text: "Buy Food", isCompleted: false},
    {text: "Learn React", isCompleted: true},
    {текст: "Создать приложение", isCompleted: true}
  ]);

  // ...
}
`` ''