需求有渲染MD,代码高亮
依赖的库有:
- MD渲染 :react-markdown 、
- 代码高亮: react-syntax-highlighter| prismjs
- 两个与 Markdown 处理和渲染有关的插件(按需):remark-gfm、rehype-color-chips。
要在React项目中使用react-markdown配合remark-gfm 和rehype-color-chips插件,您可以按照以下步骤进行操作:
- 首先,确保您已经在项目中安装了react-markdown ,remark-gfm 和rehype-color-chips。您可以使用npm或yarn来安装它们:
bash
npm install react-markdown remark-gfm rehype-color-chips react-syntax-highlighter
- 导入所需的模块和组件:
jsx
import React from 'react';
import ReactMarkdown from 'react-markdown';
import { remarkGfm } from 'remark-gfm';
import { rehypeColorChips } from 'rehype-color-chips';
- 创建一个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文档。
- 在您的应用中使用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插件来着色代码块中的语法高亮。
- 最后,确保您的项目中已经配置了CSS样式以正确显示Markdown内容和代码块中的语法高亮。您可能需要使用一些样式库,如Prism.js或highlight.js,来实现代码块的高亮显示。
这样,您就可以在React应用中使用react-markdown 与remark-gfm 和rehype-color-chips插件来渲染Markdown内容并为代码块添加语法高亮。