How to highlight variables in CKEditor?

Question

CKEditor

The implementation is as follows:

1) It is necessary to make sure that when entering text of such a plan:
Hi, {{ name }}
CKEditor highlights the conditional variable {{ name }} and highlights it with code tags (there can be not only name, the name of the variable can be anything, the main thing is that it be wrapped in {{ ... }})

2) When the user starts typing {{.. then a prepared list with variables comes out so that the user can select a variable and it is inserted into the input field

Please tell me who dealt with CKEditor , in which direction to dig, you need to write your plugin or it can be configured through the config, for a start, you would only deal with the first item.

Thank you.