Question

这是我的代码

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>

Answer 1

我的猜测是，当index.html运行时，您的React应用尚未初始化该组件initHighlightingOnLoad()

尝试在componentDidMount组件的Content内移动Headers

Answer 2

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

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>
        );
    }
}

Answer 3

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

反应：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标签的组件中，componentDidMount应该在componentDidUpdate和<pre><code>...方法中。

Answer 4

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

Highlight.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} />

无法获得highlight.js以突出显示React呈现的代码

4 个答案: