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内容并为代码块添加语法高亮。

相关推荐
伍哥的传说8 小时前
React 各颜色转换方法、颜色值换算工具HEX、RGB/RGBA、HSL/HSLA、HSV、CMYK
深度学习·神经网络·react.js
浪裡遊9 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
前端小盆友14 小时前
从零实现一个GPT 【React + Express】--- 【3】解析markdown,处理模型记忆
gpt·react.js
Cacciatore->16 小时前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~16 小时前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
贵沫末16 小时前
React——基础
前端·react.js·前端框架
爱学习的茄子16 小时前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
10年前端老司机17 小时前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js
sophie旭17 小时前
《深入浅出react开发指南》总结之 10.1 React运行时总览
前端·react.js·源码阅读
轻语呢喃17 小时前
React智能前端:从零开始写的图片分析页面实战
前端·react.js·aigc