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

相关推荐
薛定谔的算法10 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
小lan猫13 小时前
React学习笔记(一)
前端·react.js
江城开朗的豌豆18 小时前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js
前端人类学18 小时前
React框架详解:从入门到精通(详细版)
react.js·redux
江城开朗的豌豆18 小时前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js
艾小码19 小时前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
bug_kada19 小时前
详解 React useCallback & useMemo
前端·react.js
用户7847215099119 小时前
Zustand源码解读(更新中)
react.js
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
Simon_He1 天前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown