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

Question

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

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

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

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

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

Answer 1

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

Look at this chapter for an example.