how to create Syntax Highlight - jquery - css

Question

How do you create a Highlight, color marking, like an IDE if what you typed is a command? would like to create a textarea, superimposing a div, both of the same size, and when typing in the textarea, the same content would appear in the div, but with Highlight.

I’m looking to create an online IDE, like CODEPEN -> https://codepen.io/ And a text editor edtilo the Ckeditor -> https://www.drupal.org/project/ckeditor

Would anyone know how logic works? I accept frameworks, code tips, etc... I don’t want code ready, so comments are free :P

ex:

$('#codigo').keyup(function(){

  $('#highlight').html( $(this).val() );

});

#editor{
float: left;
width: 300px;
height: 300px;
background: red;
}
#codigo, #highlight{
font-family: arial;
font-size: 16px;
line-height: 20px;
position absolute;
width: inherit;
height: inherit;
padding: 0;
margin: 0;
border: none;
}
#codigo{
opacity: 0;
resize: none;
}
#highlight{
margin-top: -304px;
background: #e5e5e5;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="editor">
<textarea id="codigo">voce esta digitando em um textarea, mas aparecendo o conteudo em uma div... </textarea>
<div id="highlight">voce esta digitando em um textarea, mas aparecendo o conteudo em uma div... </div>
</div>