Using multiple CodeMirror editors on the same page?

I am writing a page with examples demonstrating the use of my js library. I would like these examples to be editable and runable, so I thought I had the following options:

• Use prettify to display the code on the manual page, click the button that opens a new window with an editor where you can run the code (currently implemented solution). Alternatively, I can make the editor some kind of modal dialogue.

• Use multiple CodeMirror editors for each example per page (there may be up to 30 on one page). I'm not sure how "heavy" these editors are, so I'm not sure if this is a good idea.

• You have an edit button that "swaps" the encoded code using the CodeMirror editor when editing is needed, so that the user can edit and run examples without worrying about new windows. I'm not sure if I can do prettify and CodeMIrror syntax highlighting to look the same.

Any ideas on how I should do this and why? I am also open to suggestions about different code editors or syntax emphasis, so if anyone has experience with similar things, please tell me how you did it.