I want to highlight shortcodes in the WordPress visual editor in a specific color. E.g. I Have the following Shortcodes

[shortcode1] Some text [/shortcode1]
[shortcode2] Some text [/shortcode2]

and want to give each of them a unique color, so the user could easily see what he should change.

I have found some solutions to syntax highlighting the HTML Editor but no one for the visual editor itself.

  • 2
    Please note, plugin recomendations are off topic, I have removed that part :-) – Pieter Goosen Apr 15 '15 at 16:17
  • Did you consider Shortcake UI? (I'm not related to that project) – birgire Apr 15 '15 at 18:21

Managed to get a working solution.

What you need:

TinyMCE Advanced plugin

What you should do:

Customize the Visual Blocks Plugin that comes with the TinyMCE plugin and add css classes for each element you would to highlight (just loop through all p elements and parse the innerHTML and check if it contains your specific pattern).

Finally it looks something like this: enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.