如何格式化类似于Stackoverflow的段落中的代码

Question

我用创建了一个博客，在其中我可以创建一篇文章，将标题、副标题和内容存储在数据库中。这是一个编码块，所以我想用三个反码来格式化代码，就像Stackoverflow一样。我怎样才能做到这一点，在正面，它识别背景色和格式的文本不同？

Answer 1

例如，您应该使用类似于此的标记代码荧光笔：

https://github.com/remarkjs/react-markdown

您可以用plugins：https://github.com/remarkjs/react-markdown#use-custom-components-syntax-highlight突出显示代码

import React from 'react'
import ReactDom from 'react-dom'
import ReactMarkdown from 'react-markdown'
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
import {dark} from 'react-syntax-highlighter/dist/esm/styles/prism'

// Did you know you can use tildes instead of backticks for code in markdown? ✨
const markdown = `Here is some JavaScript code;`

ReactDom.render(
  <ReactMarkdown
    children={markdown}
    components={{
      code({node, inline, className, children, ...props}) {
        const match = /language-(\w+)/.exec(className || '')
        return !inline && match ? (
          <SyntaxHighlighter
            children={String(children).replace(/\n$/, '')}
            style={dark}
            language={match[1]}
            PreTag="div"
            {...props}
          />
        ) : (
          <code className={className} {...props}>
            {children}
          </code>
        )
      }
    }}
  />,
  document.body
)