如何在棱镜的JavaScript变量中存储代码

Question

我正在尝试在我的网站上显示一些代码。我使用的棱镜效果很好，但是，最终我将不得不将要呈现的代码存储在mongodb数据库中。现在，我在弄清楚如何将代码保存为变量codeSnippet并将其呈现时遇到麻烦。我该怎么做呢？

看起来像什么

class DispalyCodeExample extends React.Component {

  constructor(props) {

    super(props);

    this.state = {};

  }

  componentDidMount() {

    Prism.highlightAll();

  }

  render() {

    return (

      <pre>

        <code className="language-javascript">

          {`

let animals = {

  cow: 'moo',

  mouse: 'squeak'

}

let mouse = 'cow';

let x = animals[mouse];

          `}

        </code>

      </pre>

    );

  }

}

我的尝试不起作用-由于我的codeSnippet变量

class DispalyCodeExample extends React.Component {

  constructor(props) {

    super(props);

    this.state = {};

  }

  componentDidMount() {

    Prism.highlightAll();

  }

  render() {

    const codeSnippet =  {

    let animals = {

      cow: 'moo',

      mouse: 'squeak'

    }

    let mouse = 'cow';

    let x = animals[mouse];

              };

    return (

      <pre>

        <code className="language-javascript">

         {codeSnippet}

        </code>

      </pre>

    );

  }

}

Answer 1

我将对base64整个类进行编码，然后将其存储在MongoDB中。当您准备在网页上显示时，请base64对源代码块进行解码。这样，所有源代码都不会更改为HTML字符。所有变量和函数将被保留。