1

嗨，我已经成功地将 react 语法高亮添加到使用 gatsbyjs 和strapi 的项目中，从strapi 内容被格式化为markdown，所以我已经添加react-markdown并react-syntax-hightlight处理我的应用程序中的渲染和语法高亮

这是我迄今为止实施的

文章.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

在这里，我实现了最新的 react markdown 以及如何在上面添加语法高亮。这就是它的样子

在此处输入图像描述

从这里我想在显示语法突出显示之前添加一些标题或文件名，例如 App.js。由于这是使用降价，所以我想怎么做才能做到这一点？

这是当前格式化的降价，以显示上面的语法高亮

```jsx
 常量应用 = () => {
  const [todos, setTodos] = useState([
    { text: "买食物", isCompleted: false },
    { text: "Learn React", isCompleted: true },
    { text: "构建待办事项应用程序", isCompleted: true }
  ]);

  //...
}
```
4

0 回答 0