Блог

Недавно я был на веб-сайте CodeSchool и прошел курс JQueryAir, который включает в себя веб-текстовый редактор, который показывает — в режиме реального времени — какие элементы DOM выбираются при написании кода jQuery. Он делает это, выделяя выбранные элементы HTML-страницы светло-серым цветом.

Кто-нибудь знает о текстовом редакторе (или плагине), который может воссоздать эту функциональность? В основном я хочу использовать его в практических целях. Или, если вы знаете сайт, который позволил бы мне сделать то же самое, это тоже было бы здорово.

Вот скриншот, чтобы дать вам представление о том, что я имею в виду:

По мере изменения jQuery на нижней панели подсвечивается приведенный выше HTML-код.

Любой совет приветствуется — спасибо!

Простой способ сделать это (хотя, возможно, не такой динамичный, как хотелось бы) — использовать консоль FireBug (или аналогичную в Chrome, IE9 и т.д.). После загрузки страницы, содержащей ссылку на jQuery в FireFox, перейдите на вкладку FireBug Console и вставьте это.

 $("p").css("background-color", "gray");
 

Нажмите Enter. Вы можете изменить селектор, чтобы увидеть результаты, хотя они будут суммироваться до тех пор, пока вы не обновите страницу. Используйте стрелку вверх, чтобы вернуть ваш последний селектор для редактирования.

РЕДАКТИРОВАТЬ: Хорошо, это было до того, как вы добавили скриншот, показывающий желаемую подсветку исходного кода HTML. Тем не менее, возможно, этот метод когда-нибудь пригодится.