<code contenteditable="true"> tag VS WYSIWYG editor in order to achieve dynamic multi-color effect

Question

I need to create a web application with a feature that the user is entering some text to a "text area" and the text need to be dynamically colored with multiple colors, according to some logic, via event that will be raised when the text is changing.
something similar to that: Regex101 just more basic (only multiple colors).

Constrains:

1. I don't want to use external sources or libraries.
2. no need for compatibility to old browsers.
3. I am using angular 2 with type script.

Options:

I did a research and (i think) i found 2 ways to achieve that result:

1. write my own version of WYSIWYG (btw, is that approach can be implemented dynamically?)
2. use the <code> tag and set contenteditable="true" with multiple spans as it is explained in that marked answer: Multicolor Text Highlighting in a Textarea or Text Input

According to your experience what is the approach that is more suitable for that task?

Or maybe I am missing something and there is a better approach?

I just need guidance in what way to go.