无法让 highlight.js 突出显示 React 渲染的代码答案

【问题标题】：can't get highlight.js to highlight React rendered code无法让 highlight.js 突出显示 React 渲染的代码
【发布时间】：2020-07-30 07:45:56
【问题描述】：

这是我的代码

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import MarkdownRenderer from 'react-markdown-renderer';

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

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

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

该组件获取路径传递给它的任何 Markdown 文件的内容（通过 props），然后利用 react-markdown-renderer 将该 Markdown 转换为 HTML。

我已经下载了 hihglight.js 文件并在我的 index.html 文件中指向它们。我还在 index.html 中运行了函数initHighlightingOnLoad()。但是，当网站加载时，我的代码块没有突出显示。我不确定发生了什么...有人可以帮忙吗？

这是 <MarkdownRenderer markdown={this.state.content} /> 输出到 DOM 的内容

<div>
  <h1>My Site</h1>
  <p>This is my site...</p>
  <pre>
    <code class="language-js">
      const msg = 'Welcome to My Site';
      console.log(msg); // Welcome to My SIte
    </code>
  </pre>
</div>

【问题讨论】：

标签： reactjs markdown syntax-highlighting highlight.js

【解决方案1】：

对于在上面没有找到任何有效答案并且没有成功使用 initHighlightingOnLoad 和其他内置函数的每个人。

React：16.8.2 工作示例：

import hljs from "highlight.js";
import "./dracula.css";

class Preview extends Component {
  componentDidMount() {
    this.updateCodeSyntaxHighlighting();
  }

  componentDidUpdate() {
    this.updateCodeSyntaxHighlighting();
  }

  updateCodeSyntaxHighlighting = () => {
    document.querySelectorAll("pre code").forEach(block => {
      hljs.highlightBlock(block);
    });
  };

  render() {
    return (
    <div
        className="content"
        dangerouslySetInnerHTML={{ __html: this.props.parsedText }}
    />
    );
  }
}

注意updateCodeSyntaxHighlighting 应该在每个使用<pre><code>... 标签的组件中的componentDidMount 和componentDidUpdate 方法中。

【讨论】：

【解决方案2】：

我的猜测是你的 React 应用在 index.html 运行时还没有初始化组件initHighlightingOnLoad()

尝试将initHighlightingOnLoad() 移动到您的Content 组件的componentDidMount 中

【讨论】：

我试过这样做，但仍然没有:(我确实在 [this thread][1] 中读过一些内容，表明你的猜测是正确的。我也尝试了那里的建议但没有成功...... [1 ]：github.com/isagalaev/highlight.js/issues/925

【解决方案3】：

@pkuzel 的回答对我有用，我遇到了同样的问题。希望这可以帮助

import React, {Component} from 'react';
import hljs from 'highlight.js';
import 'highlight.js/styles/vs2015.css';

hljs.configure({useBR: true});

export default class Post extends Component{
    componentDidMount(){
        hljs.initHighlightingOnLoad();
    }
    render(){
        return(
            <div>       
                <div dangerouslySetInnerHTML={{ __html: this.props.text }}></div>
            </div>
        );
    }
}

【讨论】：

【解决方案4】：

这会查看 HTML 字符串中的“代码”块

高亮.js

import React, { Component } from 'react';
import hljs from "highlight.js";
import 'highlight.js/styles/vs2015.css';

class Highlight extends Component {
    componentDidMount() {
        this.updateCodeSyntaxHighlighting();
    }

    componentDidUpdate() {
        this.updateCodeSyntaxHighlighting();
    }


    updateCodeSyntaxHighlighting = () => {
        document.querySelectorAll("code").forEach(block => {
            hljs.highlightBlock(block);
        });
    };

    render() {
        return (
            <div
                style={{ width: "100%", height: "100%", overflow: "auto", objectFit: "cover" }}
                className="content"
                dangerouslySetInnerHTML={{ __html: this.props.body }}
            />
        );
    }
}

export default Highlight;

使用它

import Highlight from "../path/to/Highlight"
< Highlight body={HTML_STRING} />

【讨论】：