Задать вопрос
@afanasiyz
Javascript-разработчик

Редактор кода на веб-странице(React), какие могут быть варианты?

Добрый день.

Ищу варианты для текстового редактора html, js, css файлов на странице, ключевые требования: подсветка синтаксиса, возможность добавлять кастомные правила для подсветки (файлы могут быть не полностью валидные, будут подставляться всякие динамические), возможность для работы с большими файлами (1000+ строк) без боли

Что попробовал:
https://www.npmjs.com/package/react-ace - не смог найти варианты, чтобы добавить кастомные правила подсветки частей кода.

https://prismjs.com/ - отличный способ создавать подсветку кода, все кастомизируется, но нет рабочего редактора "из коробки".

https://www.npmjs.com/package/react-simple-code-editor - эта штука, как заявлено, работает с prismjs, но делает это очень плохо: в случае со строками чуть шире, чем ширина экрана все едет.

В текущий момент вижу только одно решение: кастомный компонент на основе prismjs, но надо будет очень много работать над перформансом.

Если сталкивались с похожими задачами - подскажите, может есть какое то готовое решение, которое я не заметил?
Заранее спасибо
  • Вопрос задан
  • 1314 просмотров
Подписаться 2 Средний Комментировать
Пригласить эксперта
Ответы на вопрос 1
GreyCrew
@GreyCrew
Full-stack developer
Очень сильно советую ace editor
В ссылке версия для реакта. Очень просто настраивается, и оч хороший функционал.

UPD.
чуть не забыл, есть ещё codemirror, у него преимущество в большом кол-ве управлений состоянием редактора, к примеру можно сделать превью, для студентов, какого то кода, как поэтапно его писать, чтоб код в редакторе сам писался и параллаельно показывался результат.
Тоже самое можно сделать и через ace, но codemirror проще. А в ace больше возможностей, как редактора.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы