javascript - Using multiple CodeMirror editors on a single page? - Stack Overflow

admin管理员组

文章数量:1023018

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.

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.

• javascript
• prettify
• codemirror

Share Improve this question Follow edited Jan 22, 2016 at 12:02 Roman 3,85344 gold badges3232 silver badges4242 bronze badges asked May 31, 2011 at 13:07 fingerprint211bfingerprint211b 1,1861212 silver badges2424 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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.

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.

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.

• javascript
• prettify
• codemirror

Share Improve this question Follow edited Jan 22, 2016 at 12:02 Roman 3,85344 gold badges3232 silver badges4242 bronze badges asked May 31, 2011 at 13:07 fingerprint211bfingerprint211b 1,1861212 silver badges2424 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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.

本文标签： javascriptUsing multiple CodeMirror editors on a single pageStack Overflow