Ace editor not showing HTML code in editor

Question

Ace editor is not showing HTML code in the editor as shown in image , but JavaScript and CSS are fine. The code I am using is

var html = ace.edit("htmlEditor");
var css = ace.edit("cssEditor");
var js = ace.edit("jsEditor");

html.setTheme("ace/theme/xcode");
css.setTheme("ace/theme/xcode");
js.setTheme("ace/theme/xcode");

html.session.setMode("ace/mode/html");
css.session.setMode("ace/mode/css");
js.session.setMode("ace/mode/javascript");

Answer 1

Create your own html code editor instead.

HTML

<textarea oninput="run(this.value)"></textarea>
<iframe id="preview" frameborder="0"></iframe>

JavaScript

function run(code) {
  document.getElementById("preview").contentDocument.body.innerHTML = code;
}

This editor is Live . Also, if you want a debugger, use this.

JavaScript

function debug(code) {
  try {
    new Function(code);
  } catch(e) {
    alert(e)
  }
}

when there is no error, it doesn't alert but it's run the result. else, it alerts the error.