Visual Editor – Colorize Shortcodes

by

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.

1 Answer
1

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

Leave a Comment