react-markdown 如何实现代码块高亮显示？

Question

在使用 `react-markdown` 渲染 Markdown 内容时，如何实现代码块的高亮显示是一个常见问题。默认情况下，`react-markdown` 不会自动为代码块添加语法高亮，需要借助第三方库如 `rehype-prism` 或 `remark-highlight.js` 来实现。例如，通过安装 `rehype-prism` 并将其作为插件传递给 `react-markdown`，可以轻松实现代码高亮功能。具体实现中，用户可能遇到的问题包括：如何正确配置插件、如何自定义代码块样式，以及如何处理行号显示等扩展需求。此外，若未正确加载高亮样式文件，可能会导致代码块虽被解析但无颜色显示。这些问题需确保样式文件正确引入并匹配所用高亮库的主题。

Answer 1

使用 React-Markdown 实现代码块高亮显示的完整指南

1. 基础配置：引入 rehype-prism 插件

在使用 `react-markdown` 渲染 Markdown 内容时，实现代码块高亮是一个常见的需求。默认情况下，`react-markdown` 并不会自动为代码块添加语法高亮，因此需要借助第三方库如 `rehype-prism`。

• 首先，安装依赖项：

  npm install react-markdown rehype-prism prism-react-renderer

• 接下来，在组件中引入并配置插件：

import React from 'react';
import ReactMarkdown from 'react-markdown';
import rehypePrism from 'rehype-prism';

function App() {
  const markdownContent = '# Hello World\n\n```js\nconsole.log("Hello, world!");\n```';

  return (
    <ReactMarkdown rehypePlugins={[rehypePrism]}>
      {markdownContent}
    </ReactMarkdown>
  );
}

export default App;

2. 样式文件加载与主题匹配

即使正确配置了插件，如果未加载对应的样式文件，代码块可能无法正常显示颜色。确保在项目中引入 Prism.js 的样式文件：

import 'prismjs/themes/prism-tomorrow.css'; // 引入 Prism.js 的 Tomorrow 主题

根据个人需求选择合适的主题，例如 `prism-coy.css` 或 `prism-okaidia.css`。此外，可以自定义样式以覆盖默认主题。

主题名称	视觉效果
prism-tomorrow.css	轻量明亮风格
prism-okaidia.css	深色背景风格

3. 扩展功能：行号显示与自定义样式

除了基本的代码高亮外，还可以通过扩展实现行号显示等功能。以下是一个使用 `prism-react-renderer` 的示例：

import React from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { Prism as SyntaxHighlighter } from 'prism-react-renderer';
import 'prism-react-renderer/prism.css';

function CodeBlock({ language, value }) {
  return (
    <SyntaxHighlighter language={language} showLineNumbers>
      {value}
    </SyntaxHighlighter>
  );
}

function App() {
  const markdownContent = '# Hello World\n\n```js\nconsole.log("Hello, world!");\n```';

  return (
    <ReactMarkdown
      components={{ code: CodeBlock }}
      remarkPlugins={[remarkGfm]}
    >
      {markdownContent}
    </ReactMarkdown>
  );
}

export default App;

上述代码中，`prism-react-renderer` 提供了更灵活的渲染方式，支持行号显示和动态样式调整。

4. 常见问题分析与解决

以下是用户在实现过程中可能遇到的问题及其解决方案：

1. 问题：代码块解析后无颜色显示。
   原因：未正确加载 Prism.js 样式文件。
   解决：确保引入正确的 CSS 文件，如 `prism-tomorrow.css`。
2. 问题：代码块无法识别语言类型。
   原因：Markdown 中未指定语言标识（如 ````js`）。
   解决：检查 Markdown 输入是否包含语言标记。

通过以上步骤，可以有效避免常见错误并优化用户体验。

5. 流程图：代码高亮实现流程

graph TD;
    A[开始] --> B[安装依赖];
    B --> C[配置 rehype-prism 插件];
    C --> D[加载 Prism.js 样式];
    D --> E[扩展功能：行号显示];
    E --> F[完成];