时间戳

首页 > 解决方案 > 如何将代码存储在 prism 的 javascript 变量中

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

问题描述

我正在尝试在我的网站上显示一些代码。我正在使用运行良好的 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>
    );
  }
}

标签： javascripthtmlmongodb

解决方案

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

推荐阅读