在
React 中，可以使用第三方库
React Markdown，它可以将 Markdown 格式的文本转换成 HTML 格式，并且支持
代码块的渲染。
首先，需要
安装 React Markdown：
```bash
npm install
react-markdown
```
然后，可以在组件中引入
React Markdown，例如：
```jsx
import
ReactMarkdown from '
react-markdown';
function MyComponent() {
const markdownText = `
# Hello, world!
Here is a
code block:
\`\`\`javascript
const greeting = "Hello, world!";
console.log(greeting);
\`\`\`
`;
return (
<div>
<
ReactMarkdown source={markdownText} />
</div>
);
}
```
在上面的例子中，我们将 Markdown 格式的文本作为 `source` 属性传递给 `
ReactMarkdown` 组件，并且在文本中使用三个反引号来标记
代码块。
React Markdown 会自动识别
代码块，并将其渲染成 `<pre>` 和 `<
code>` 标签。
你还可以通过 `renderers` 属性来自定义
代码块的渲染方式，例如：
```jsx
import
ReactMarkdown from '
react-markdown';
function MyComponent() {
const markdownText = `
# Hello, world!
Here is a
code block:
\`\`\`javascript
const greeting = "Hello, world!";
console.log(greeting);
\`\`\`
`;
const
CodeBlock = ({ language, value }) => {
return (
<pre>
<
code className={`language-${language}`}>{value}</
code>
</pre>
);
};
return (
<div>
<
ReactMarkdown
source={markdownText}
renderers={{
code:
CodeBlock
}}
/>
</div>
);
}
```
在上面的例子中，我们定义了一个名为 `
CodeBlock` 的组件来自定义
代码块的渲染方式，并将其作为 `renderers` 属性的值传递给 `
ReactMarkdown` 组件。在 `
CodeBlock` 组件中，我们使用 `prismjs` 库来高亮
代码块，并且根据
代码块的语言来添加对应的类名。
希望这能帮助到你。
193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
