WP: как подсветить в текстовом редакторе теги шорткода?

Question

[Михаил Р.]

Всем привет! При добавление нескольких шорткодов на страницу - там начинает хаос, куча тегов, не понятно откуда ноги растут.

Пример (а если таких вложенных шорткодов будет 50?):

В некоторых покупных (и не только) шорткодах замечал подсветку их тегов, в примере ниже сделана рамка с заголовком.

Пример:

В моем случае хочу просто выделить начальный и конечный тег, например жирным выделением этого текста.


Понятно, что можно отловить на js определенный кусок тега и выделить его в режиме реального времени, но если я правильно понимаю - это костыль, может быть есть какие-то более простые методы решить данную задачу?
Спасибо!

Comments

[Site Developer]

При добавление нескольких шорткодов на страницу - там начинает хаос

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

[Павел Волынцев]

А что это за плагин, в котором shortcode оформляется? Мне интересно - я тоже плагин с шорткодами делаю https://enricher.icons8.com/ и тоже выглядит страшненько

[Павел Волынцев]

Site Developer: встречаются часто. Например, плагин для формирования responsive таблицы. Или аккордеоны.

[Site Developer]

Павел Волынцев: "встречается" != "хорошо" != "правильно".

Answer 1

[Roman]

Через js.
Стандартный редактор - это просто textarea, в котором вы не можете выделить визуально отдельные элементы.

Есть плагины, например HTML Editor Syntax Highlighter.
Они скрывают стандартный textarea и создают в DOM элемент pre, разбирают весь контент на элементы и оборачивают отдельные в span с присвоенными стилями.