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

Question

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

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

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

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

关于我应该如何做以及为什么这样做的任何想法？我也乐于接受有关不同代码编辑器或语法高亮器的建议，所以如果有人对此类事情有经验，请告诉我您是如何做到的。

Answer 1

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

请查看本章的示例。