javascript - 如何将代码存储在 prism 的 JavaScript 变量中

Question

我正在尝试在我的网站上显示一些代码。我正在使用运行良好的 prism，但是，我最终必须将我尝试在 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 字符。所有变量和函数都将被保留。