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

Question

我正在写一个页面，里面有演示我的js库的使用的例子。我想这些例子可编辑和可运行的，所以我想我有以下选择：

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

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

• 有一个编辑按钮，可以在需要编辑时使用CodeMirror编辑器“交换”完美的代码，以便用户可以编辑和运行示例，而不用担心新窗口。我不确定是否可以将美化和CodeMIrror的语法高亮显示为相同。

任何想法，我应该如何做到这一点，为什么？我也很乐意提供关于不同代码编辑器或语法轮廓笔的建议，所以如果任何人有这种事情的经验，请告诉我你是如何做到的。

Answer 1

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

Look at this chapter for an example.