What are the requirements for /mode/html in Ace editor?

I can get mode/javascript working with:

JS
https://github.com/ajaxorg/ace-builds/blob/master/src-noconflict/ace.js

Theme
https://github.com/ajaxorg/ace-builds/blob/master/src-noconflict/theme-tomorrow.js

Mode
https://github.com/ajaxorg/ace-builds/blob/master/src-noconflict/mode-javascript.js

Worker
https://raw.github.com/ajaxorg/ace-builds/master/src-noconflict/worker-javascript.js

HTML

<script src="/static/js/ace/ace.js"></script>

<div class="my_ace_editor">
function foo(items) {
    var x = "All this is syntax highlighted";
    return x;
}
</div>

CSS

#my_ace_editor {
    position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
}

jQuery

$(document).ready(function() {
    var editor = ace.edit("my_ace_editor");
    editor.setTheme("ace/theme/tomorrow");
    editor.getSession().setMode("ace/mode/javascript");
});

But am not having any luck when attempting to display HTML with:

HTML

<div id="my_ace_editor"><p>test</p></div>

jQuery

$(document).ready(function() {
    var editor = ace.edit("my_ace_editor");
    editor.setTheme("ace/theme/tomorrow");
    editor.getSession().setMode("ace/mode/html");
});

and have added:

https://raw.github.com/ajaxorg/ace-builds/master/src-noconflict/mode-html.js

If I type in the HTML editor, the tags and content have syntax highlighting applied.

But it is not showing the actual HTML when it loads - all it shows is test.

There are no Firebug errors and I can see the actual HTML that should be highlighted in Firebug.

Is another file or setting required?

Edit: I can get the HTML content within Ace editor showing correctly if I use:

editor.setValue("<html>test</html>",-1);

But I need to be able to set the value from the HTML itself and not in the jQuery.

The content is being loaded from a database (ie it is 'dynamic content'), i'm not sure if that makes a difference?

Solution

You need to escape html, that is instead of

<div id="my_ace_editor"><p>html&test</p></div>

it should be

<div id="my_ace_editor">&lt;p>html&amp;test&lt;/p></div>

This is true for all modes not just html