无法让highlight.js高亮React渲染的代码求助

我明白你遇到的麻烦了——当通过React动态渲染Markdown中的代码块时，highlight.js没法自动识别新生成的DOM元素，导致代码块没有高亮效果。下面给你几个针对性的解决方案：

方案1：利用组件生命周期手动触发高亮 #

highlight.js默认只在页面初始加载时扫描一次DOM，而你的代码是通过fetch异步获取后由React渲染的，所以需要在组件更新完成后手动调用高亮方法。

首先确保已安装highlight.js：

npm install highlight.js --save

然后修改你的组件代码，在内容更新后触发高亮：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import MarkdownRenderer from 'react-markdown-renderer';
import hljs from 'highlight.js';
// 记得引入你喜欢的高亮样式
import 'highlight.js/styles/github-dark.css';

export default class Content extends Component {
  constructor(props) {
    super(props);
    this.state = { content: '' };
  }

  // 替换过时的componentWillMount，用componentDidMount更规范
  componentDidMount() {
    const file_path = this.props.mdfPath;
    fetch(file_path)
      .then(response => response.text())
      .then(content => this.setState({ content }));
  }

  componentDidUpdate(prevProps, prevState) {
    // 仅当content更新后才触发高亮，避免不必要的性能消耗
    if (prevState.content !== this.state.content) {
      hljs.highlightAll();
    }
  }

  render() {
    return(
      <div>
        <MarkdownRenderer markdown={this.state.content} />
      </div>
    )
  }
}

方案2：自定义代码块渲染逻辑（更高效） #

如果react-markdown-renderer支持自定义渲染器，我们可以直接在渲染代码块时完成高亮，不需要事后扫描整个DOM，性能更好：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import MarkdownRenderer from 'react-markdown-renderer';
import hljs from 'highlight.js';
import 'highlight.js/styles/github-dark.css';

export default class Content extends Component {
  constructor(props) {
    super(props);
    this.state = { content: '' };
  }

  componentDidMount() {
    const file_path = this.props.mdfPath;
    fetch(file_path)
      .then(response => response.text())
      .then(content => this.setState({ content }));
  }

  render() {
    // 自定义代码块渲染函数
    const customRenderers = {
      code: ({ language, value }) => {
        // 如果代码块没有指定语言，默认用plaintext
        const highlightedCode = hljs.highlight(value, { 
          language: language || 'plaintext' 
        }).value;
        return (
          <pre>
            <code dangerouslySetInnerHTML={{ __html: highlightedCode }} />
          </pre>
        );
      }
    };

    return(
      <div>
        <MarkdownRenderer 
          markdown={this.state.content} 
          renderers={customRenderers} 
        />
      </div>
    )
  }
}

函数式组件版本（如果你用React Hooks） #

如果是函数式组件，可以用useEffect钩子替代生命周期方法：

import React, { useState, useEffect } from 'react';
import MarkdownRenderer from 'react-markdown-renderer';
import hljs from 'highlight.js';
import 'highlight.js/styles/github-dark.css';

export default function Content(props) {
  const [content, setContent] = useState('');

  // 异步获取Markdown内容
  useEffect(() => {
    fetch(props.mdfPath)
      .then(response => response.text())
      .then(text => setContent(text));
  }, [props.mdfPath]);

  // 内容更新后触发高亮
  useEffect(() => {
    if (content) hljs.highlightAll();
  }, [content]);

  return(
    <div>
      <MarkdownRenderer markdown={content} />
    </div>
  )
}

常见排查点 #

• 确认已引入highlight.js的样式文件，否则即使高亮逻辑生效，也看不到样式效果
• 如果代码块没有指定语言（比如没有```javascript标记），可以设置默认语言避免识别失败
• 若使用的react-markdown-renderer版本较旧，可能不支持自定义渲染器，此时方案1会更稳妥

内容的提问来源于stack exchange，提问作者jsdev17