在單個頁面上使用多個CodeMirror編輯器？

Question

我正在寫一個頁面，裏面有演示我的js庫的使用的例子。我想這些例子可編輯和可運行的，所以我想我有以下選擇：

• 使用prettify顯示教程頁面上的代碼，具有與編輯器中打開一個新的窗口中的按鈕，你可以運行代碼（目前實施的解決方案）。或者，我可以讓編輯器成爲某種形式的模式對話框。

• 對頁面上的每個示例使用多個CodeMirror編輯器（單個頁面上最多可以有30個）。我不確定這些編輯是多麼「沉重」，所以我不確定這是個好主意。

• 有一個編輯按鈕，可以在需要編輯時使用CodeMirror編輯器「交換」完美的代碼，以便用戶可以編輯和運行示例，而不用擔心新窗口。我不確定是否可以將美化和CodeMIrror的語法高亮顯示爲相同。

任何想法，我應該如何做到這一點，爲什麼？我也很樂意提供關於不同代碼編輯器或語法輪廓筆的建議，所以如果任何人有這種事情的經驗，請告訴我你是如何做到的。

Answer 1

您可以使用Marijn Haverbeke（CodeMirror的創建者）用於他的JavaScript書籍的在線版本的相同技術。它顯示代碼片段，並提供一個編輯按鈕，在屏幕底部打開一個javascript控制檯。

Look at this chapter for an example.