为什么我的降价不会渲染代码块

时间:2017-11-01 22:07:52

标签: javascript reactjs markdown

使用此https://jonschlinkert.github.io/remarkable/demo/,我尝试渲染代码块,如下所示: code - >但是在我的反应应用中,灰色突出显示丢失了?这是为什么?降价的其他所有东西似乎都有效。

 import React, { Component } from "react";
 var Remarkable = require("remarkable");
 var hljs = require("highlight.js");

class ProjectApprovalText extends Component {
  constructor(props) {
    super(props);
    this.rawMarkup = this.rawMarkup.bind(this);
    this.renderNormal = this.renderNormal.bind(this);
    this.renderEditTextArea = this.renderEditTextArea.bind(this);
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.text !== this.props.text) {
      this.renderNormal();
    }
  }

  rawMarkup() {
    var md = new Remarkable("full", {
      html: false, // Enable HTML tags in source
      xhtmlOut: false, // Use '/' to close single tags (<br />)
      breaks: false, // Convert '\n' in paragraphs into <br>
      langPrefix: "language-", // CSS language prefix for fenced blocks
      linkify: true, // autoconvert URL-like texts to links
      linkTarget: "", // set target to open link in

      // Enable some language-neutral replacements + quotes beautification
      typographer: false,

      // Double + single quotes replacement pairs, when typographer enabled,
      // and smartquotes on. Set doubles to '«»' for Russian, '„“' for German.
      quotes: "“”‘’"
    });
    var rawMarkup = md.render(this.props.text.toString());
    return { __html: rawMarkup };
  }

  renderNormal = () => {
    return (
      <div>
        <div dangerouslySetInnerHTML={this.rawMarkup()} />
        <button onClick={this.props.editProjectApprovalTextArea}>Edit</button>
      </div>
    );
  };

  renderEditTextArea = () => {
    return (
      <div>
        <textarea
          id="myTextArea"
          onChange={this.props.getChangeFromTextArea}
          defaultValue={this.props.text}
        />
        <button onClick={this.props.saveProjectApprovalTextArea}>Save</button>
      </div>
    );
  };

  render() {
    return (
      <div>
        {this.props.editTextState
          ? this.renderEditTextArea()
          : this.renderNormal()}
      </div>
    );
  }
}

export default ProjectApprovalText;

从本质上讲,我只是想在堆栈溢出时尝试获得与此处相同的行为。

0 个答案:

没有答案