Code Mirror Textarea Highlighter

codemirror.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/codemirror.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/theme/dracula.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/mode/javascript/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/mode/css/css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/mode/htmlmixed/htmlmixed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/mode/xml/xml.min.js"></script>

<script>
  var editor = CodeMirror.fromTextArea(document.getElementById("textarea"), {
    mode: "text/html",
    lineNumbers: true,
	  lineWrapping:true ,
	 theme: "dracula",
	  viewportMargin: Infinity,
    onKeyEvent: function(editor) {
        document.getElementById("code").innerHTML = editor.getValue();
    }
  });
</script>
<style>
	.CodeMirror { text-align: left!important; 
	 resize: vertical;
    height: auto;
		
	}
	 
</style>

<div name="code" id="code" ></div>
    
						<textarea  id="textarea" >Hello world</textarea>