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");

AlexZeDim · Accepted Answer · 2021-03-20 06:03:21Z

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.

edited Mar 20, 2021 at 6:03

AlexZeDim

4,4424 gold badges34 silver badges79 bronze badges

answered Mar 19, 2021 at 12:39

Delvzz

112 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MisterBrownZA Over a year ago

The question was to fix ace, but you provided a non-relative answer.

Collectives™ on Stack Overflow

Ace editor not showing HTML code in editor

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related