【让你的md的代码块高亮】 react-showdown codeBlock高亮

LeeTikPaak19

已于 2022-05-25 16:21:55 修改

阅读量1.6k

点赞数

分类专栏：前端文章标签： react.js javascript 前端

于 2022-02-11 15:19:42 首次发布

本文链接：https://blog.csdn.net/weixin_43521227/article/details/122881266

版权

前端专栏收录该内容

36 篇文章 2 订阅

订阅专栏

这篇博客介绍了如何在React应用中使用`react-markdown`和`react-syntax-highlighter`库来渲染Markdown代码，并展示了如何自定义组件以实现代码高亮。特别是，当遇到代码块较短或包含特定字符时，如何决定是否进行高亮显示。通过修改条件判断，可以优化代码高亮的逻辑，提高阅读体验。

摘要由CSDN通过智能技术生成

import React from 'react'
import ReactDom from 'react-dom'
import ReactMarkdown from 'react-markdown'
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
import {atomDark} 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:

~~~js
console.log('It works!')
~~~
`

ReactDom.render(
  <ReactMarkdown
    children={markdown}
    components={{
      code({node, inline, className, children, ...props}) {
        return !inline && match ? (
          <SyntaxHighlighter
            children={String(children).replace(/\n$/, '')}
            style={atomDark}
            PreTag="div"
            {...props}
          />
        ) : (
          <code className={className} {...props}>
            {children}
          </code>
        )
      }
    }}
  />,
  document.body
)

当遇到code Block过短而不想高亮，或者含有特殊字符的code Block高亮
我们把上面的代码稍作修改

        return !inline &&  (children[0].length > 40 || /\.\/|\//.test(children[0])) ? (
          <SyntaxHighlighter
            children={String(children).replace(/\n$/, '')}
            style={atomDark}
            PreTag="div"
            {...props}
          />
        )