Блог

Я пишу страницу с примерами, демонстрирующими использование моей библиотеки js. Я бы хотел, чтобы эти примеры были редактируемыми и выполняемыми, поэтому я подумал, что у меня есть эти варианты :

• Используйте prettify для отображения кода на странице руководства, используйте кнопку, которая открывает новое окно с редактором, где вы можете запустить код (реализованное в настоящее время решение). В качестве альтернативы я могу сделать редактор каким-то модальным диалоговым окном.

• Используйте несколько редакторов CodeMirror для каждого примера на странице (их может быть до 30 на одной странице). Я не уверен, насколько «тяжелы» эти редакторы, поэтому я не уверен, что это хорошая идея.

• Есть кнопка редактирования, которая «заменяет» доработанный код редактором CodeMirror, когда требуется редактирование, чтобы пользователь мог редактировать и запускать примеры, не беспокоясь о новых окнах. Я не уверен, смогу ли я сделать подсветку синтаксиса prettify и CodeMirror одинаковой.

Есть идеи о том, как я должен это сделать и почему? Я также открыт для предложений о разных редакторах кода или подсветках синтаксиса, поэтому, если у кого-нибудь есть опыт работы с подобными вещами, пожалуйста, расскажите мне, как вы это сделали.

Вы могли бы использовать ту же технику, которую Марийн Хавербеке (создатель CodeMirror) использует для онлайн-версии своей книги по javascript. Он показывает фрагменты кода и предоставляет кнопку редактирования, которая открывает консоль javascript в нижней части экрана.

Посмотрите на эту главу для примера.