в поле редактирования вместо шорткода показать

написал шорт код и кнопку для его вставки, теперь когда я вставляю его в запись появляется [shortcode]текст[/shortcode].
Как сделать так, чтобы вместо тега [shortcode] было оформление этого текста, говорящее, что именно этот шорткод сейчас используется. Таковое хотелось бы наблюдать в visual редакторе, а при выборе text — версии редактора видеть соответственно присутствие шорткода.

подобную вещь видел в плагине crayon syntax highlighter — там используется тег

 и это видно если нажать text. в визуальном же редакторе видно окно со стилем кода.

как такое делать? ткните носом куда копать :) надеюсь понятно изложил.
спасибо:)