Question

I’m writing a page with examples that demonstrate the use of my js library. I’d like these examples to be editable and runnable, so I thought I have these options :

• Use prettify to display code on the tutorial page, have a button that opens a new window with the editor where you can run the code (currently implemented solution). Alternatively, I can make the editor a modal dialog of some sort.

• Use multiple CodeMirror editors for each example on the page (could be up to 30 on a single page). I’m not sure how “heavy” those editors are, so I’m not sure if that’s a good idea.

• Have an edit button that “swaps” prettyfied code with a CodeMirror editor when editing is needed, so that the user can edit and run the examples without bothering with new windows. I’m not sure if I can make prettify and CodeMIrror’s syntax highlighting to look the same.

Any ideas on how I should do this and why? I’m also open to suggestions about different code editors or syntax highlighters too, so if anybody has experience with this kind of thing, please tell me how you did it.

Answer 1

You could use the same technique that Marijn Haverbeke (the creator of CodeMirror) uses for the online version of his javascript book. It shows code snippets, and provides an edit-button that opens a javascript console at the bottom of the screen.

Look at this chapter for an example.