Change the appearance of the short code in the wordpress tinymce editor

Question

Can I change the appearance of a short code in the TinyMCE Wordpress editor? One of my clients does not have knowledge of HTML, and it is very difficult to explain to him what not to edit on subpages.

By default, shortcodes look like this:

And I want to achieve this:

Does TinyMCE support any kind of custom filtering?

Answer 1

Looks like you should use SyntaxHighlighter plugin with TinyMCE - Adding SyntaxHighlighter to TinyMCE

After you integrate, create a new brush that will be colored [shortcode] .