MarkDown渲染(react-markdown)+代码高亮(react-syntax-highlighter)

需求有渲染MD,代码高亮

依赖的库有:

要在React项目中使用react-markdown配合remark-gfmrehype-color-chips插件,您可以按照以下步骤进行操作:

  1. 首先,确保您已经在项目中安装了react-markdownremark-gfmrehype-color-chips。您可以使用npm或yarn来安装它们:
bash 复制代码
npm install react-markdown remark-gfm rehype-color-chips react-syntax-highlighter
  1. 导入所需的模块和组件:
jsx 复制代码
import React from 'react';
import ReactMarkdown from 'react-markdown';
import { remarkGfm } from 'remark-gfm';
import { rehypeColorChips } from 'rehype-color-chips';
  1. 创建一个React组件,该组件将用于渲染Markdown内容:
jsx 复制代码
function MarkdownRenderer({ markdown }) {
  return (
    <ReactMarkdown
  		remarkPlugins={[remarkGfm]}
  		rehypePlugins={[rehypeColorChips]}
                components={{
                        code({node, inline, className, children, ...props}) {
                            const match = /language-(\w+)/.exec(className || '');
                            return !inline && match ? (
                                <>
                                    <div className={style.tool}>
                                        <div className="lang">{match[1]}</div>
                                        <div
                                            style={{cursor: 'pointer'}}
                                            className="copy"
                                            onClick={() => {
                                                copyText(children, '', '');
                                            }}
                                        >
                                            <CopySvg /> <span style={{marginLeft: 4}}>复制</span>
                                        </div>
                                    </div>
                                    <SyntaxHighlighter
                                        {...props}
                                        children={children}
                                        language={match[1]}
                                        PreTag="div"
                                        wrapLongLines={true}
                                        wrapLines={false}
                                    />
                                </>
                            ) : (
                                <code {...props} className={className}>
                                    {children}
                                </code>
                            );
                        },
                    }}
    >
    {markdown}
    </ReactMarkdown>
  );
}

上述组件接受一个名为markdown的prop,其中包含您要渲染的Markdown内容。

在components重新的code部分的内容,如果是非行内代码块则使用SyntaxHighlighter代码高亮组件,

components中可以重新的内容还有很多,详细参考react-markdown gitHub文档。

  1. 在您的应用中使用MarkdownRenderer组件,将Markdown内容传递给它:
jsx 复制代码
function App() {
  const markdownContent = `
  ## Example Markdown

  This is a code block:

  const greeting = "Hello, World!";
  console.log(greeting`);`

  This is a table:

  | Header 1 | Header 2 |
  | -------- | -------- |
  | Content 1 | Content 2 |
  `;

  return (
    <div className="App">
    <MarkdownRenderer markdown={markdownContent} />
    </div>
  );
}

这将在您的React应用中呈现Markdown内容,并使用remark-gfm 插件支持GitHub Flavored Markdown,以及rehype-color-chips插件来着色代码块中的语法高亮。

  1. 最后,确保您的项目中已经配置了CSS样式以正确显示Markdown内容和代码块中的语法高亮。您可能需要使用一些样式库,如Prism.js或highlight.js,来实现代码块的高亮显示。

这样,您就可以在React应用中使用react-markdownremark-gfmrehype-color-chips插件来渲染Markdown内容并为代码块添加语法高亮。

相关推荐
小李小李不讲道理5 小时前
「Ant Design 组件库探索」四:Input组件
前端·javascript·react.js
知识分享小能手13 小时前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3
NeverSettle_17 小时前
React工程实践面试题深度分析2025
javascript·react.js
学前端搞口饭吃18 小时前
react reducx的使用
前端·react.js·前端框架
努力往上爬de蜗牛18 小时前
react3面试题
javascript·react.js·面试
开心不就得了18 小时前
React 进阶
前端·javascript·react.js
谢尔登18 小时前
【React】React 哲学
前端·react.js·前端框架
学前端搞口饭吃20 小时前
react context如何使用
前端·javascript·react.js
GDAL20 小时前
为什么Cesium不使用vue或者react,而是 保留 Knockout
前端·vue.js·react.js
Dragon Wu1 天前
React state在setInterval里未获取最新值的问题
前端·javascript·react.js·前端框架