在单个页面上使用多个 CodeMirror 编辑器？

Question

我正在编写一个页面，其中包含演示如何使用我的 js 库的示例。我希望这些示例是可编辑和可运行的，所以我认为我有这些选项：

• 使用prettify 在教程页面上显示代码，有一个按钮可以打开一个带有编辑器的新窗口，您可以在其中运行代码（当前实施的解决方案）。或者，我可以使编辑器成为某种模式对话框。

• 为页面上的每个示例使用多个 CodeMirror 编辑器（单个页面上最多可以有 30 个）。我不确定这些编辑器有多“重”，所以我不确定这是否是个好主意。

• 有一个编辑按钮，当需要编辑时，它可以用 CodeMirror 编辑器“交换”漂亮的代码，这样用户就可以编辑和运行示例而无需担心新窗口。我不确定是否可以使美化和 CodeMIrror 的语法高亮看起来相同。

关于我应该如何做到这一点以及为什么这样做的任何想法？我也愿意接受有关不同代码编辑器或语法荧光笔的建议，所以如果有人有这方面的经验，请告诉我你是如何做到的。

Answer 1

您可以使用 Marijn Haverbeke（CodeMirror 的创建者）在他的 javascript 书籍的在线版本中使用的相同技术。它显示了代码 sn-ps，并提供了一个编辑按钮，可在屏幕底部打开一个 javascript 控制台。

Look at this chapter for an example.