javascript - 如何在 MongoDB 中保存多行代码片段，检索并以 HTML 格式显示它们

Question

我正在开发 React Web 应用程序，该应用程序(除其他外)呈现出存储在数据库中的某些代码片段。

例如，假设我想将以下代码块(包括缩进和换行符)存储在 MongoDB 数据库中并将其显示在页面上:

<div class='parent'>
  <p class='child'>Lorem ipsum.</p>
</div>

我应该如何格式化此代码字符串以将其存储在 MongoDB 中，我需要做什么才能在页面上以相同的格式呈现它？我尝试使用 \n 存储字符串代替我的 MongoDB 数据库中的换行符，但是在我检索并显示它之后，它会在浏览器中呈现文本“\n”，即使该文本包含在 <pre> 中和 <code>标签。

谢谢!

Answer 1

您可以将代码保存为 MongoDB 数据库中的字符串，使用\n 作为换行符。诀窍是使用 React 组件，该组件将正确解析字符串并根据语言规则对其进行格式化，例如JavaScript。
我个人使用一个名为 Markdown-It 的 Markdown 解析器，它可以使用高亮库，如 highlight.js 或 prism，并格式化代码以在 pre/code 标记中显示。
这是我如何渲染从 MongoDB 数据库返回的字符串并将其显示为 React 组件中的代码的精简示例:
//代码显示.js

import MarkdownIt from "markdown-it";
import hljs from "highlight.js/lib/core";
import javascript from "highlight.js/lib/languages/javascript";
hljs.registerLanguage("javascript", javascript);

export default function CodeDisplay({
  code,
  technology = "javascript"
}) {
  return (
    <div
      className="code_display"
      dangerouslySetInnerHTML={{
        __html: markdownParser.render(`\`\`\` ${technology}\n${code}\n\`\`\``)
      }}
    />
  );
}

const markdownParser = new MarkdownIt({
  breaks: true,
  highlight: function (str: string, lang = "javascript") {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return `<pre class="hljs"><code>${
          hljs.highlight(lang, str, true).value
        }</code></pre>`;
      } catch (error) {}
    }
    return `<pre class="hljs"><code>${markdownParser.utils.escapeHtml(
      str
    )}</code></pre>`;
  }
});

上面的组件将接受我的代码字符串和我希望语法突出显示的语言，并将其渲染出来。
以下是在我的 MongoDB 数据库中存储为字符串的示例:

"const Animal = (name, type) => {\n  this.name = name\n  this.type = type\n  this.age = 0\n}\n\nAnimal.prototype.birthday = function () {\n  this.age++\n}\n\nconst leo = new Animal('Leo', 'Lion')"

下面是 CodeDisplay 组件将如何呈现它:

因此，它实际上相当简单，至少在存储代码时 - 只需将其存储为带有换行符的基本字符串，然后解析/突出显示它并在 React 的组件中显示它。
我猜你前段时间问过这个问题，希望你能把它整理好，并希望它可以帮助其他遇到这个问题的人!