How to highlight shortcodes in tinyMCE editor

Question

I have shortcodes inside the tinyMCE editor that are enclosed in brackets like this:

[my_shortcode]some text that gets parsed by my shortcode function[/my_shortcode]

Is it possible to apply a runtime style css to the tinyMCE editor contents so that any element that is in brackets (that's in my list of shortcodes*) gets a special css treatment to make them stand out?

The idea is that the shortcodes currently have no special color or formatting to differentiate them from any surrounding text and it can be difficult to work with them unless they stand out more.

My list of shortcodes (example):

[my_shortcode],[my_shortcode_2],[my_shortcode_3]

Update: I'll take what I can get on this one, but ideally, I only want to apply styling to the brackets, not the text that the brackets are wrapped around. So I'd like to apply a runtime css style to the shortcode brackets only: [my_shortcode] and [/my_shortcode] for example and leave the text that they enclose alone.

Answer 1

Problem here is that you cannot apply css to parts of text content of a html element. My solution approch would look like this: You will need to wrap those closed tags into a span with a special class. This way your shortcodes can be highlighted. When you submit your editor content to the server you will have to strip the spans with your special class and replace them with with its textContent.