Utilisation de plusieurs éditeurs CodeMirror sur une seule page?

Question

J'écris une page avec des exemples qui démontrent l'utilisation de ma bibliothèque js. Je voudrais ces exemples pour être modifiable et runnable, donc je pensais que je ces options:

• Utilisez prettify pour afficher le code sur la page de tutoriel, un bouton qui ouvre une nouvelle fenêtre avec l'éditeur où vous peut exécuter le code (solution actuellement mise en œuvre). Alternativement, je peux faire de l'éditeur un dialogue modal de quelque sorte.

• Utilisez plusieurs éditeurs CodeMirror pour chaque exemple de la page (cela peut représenter jusqu'à 30 sur une seule page). Je ne suis pas sûr de savoir à quel point ces éditeurs sont «lourds», donc je ne suis pas sûr que ce soit une bonne idée. Avoir un bouton d'édition qui "swap" code prettyfied avec un éditeur CodeMirror lorsque l'édition est nécessaire, de sorte que l'utilisateur peut modifier et exécuter les exemples sans déranger avec de nouvelles fenêtres. Je ne suis pas sûr si je peux faire des prettify et la coloration syntaxique de CodeMIrror pour se ressembler.

Des idées sur comment je devrais faire cela et pourquoi? Je suis également ouvert aux suggestions sur les différents éditeurs de code ou les surligneurs de syntaxe, donc si quelqu'un a de l'expérience avec ce genre de chose, s'il vous plaît dites-moi comment vous l'avez fait.

Answer 1

Vous pouvez utiliser la même technique que Marijn Haverbeke (le créateur de CodeMirror) utilise pour la version en ligne de son livre javascript. Il montre des extraits de code, et fournit un bouton d'édition qui ouvre une console javascript en bas de l'écran.

Look at this chapter for an example.