Untitled

<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
    #editor {
        width: 500px;
        height: 400px;
    }
</style>
</head>
<body>

<pre id="editor"></pre>
</br>
<div>No of char:
<label id="count"></label>
</div>

<!-- load ace -->
<script src="ace-builds/src-noconflict/ace.js"></script>
<!-- load ace language tools -->
<script src="ace-builds/src-noconflict/ext-language_tools.js"></script>
<script>
    ace.require("ace/ext/language_tools");
    var editor = ace.edit("editor");
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true
    });

    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/c_cpp");

    editor.getSession().on('change', function(e) {
        document.getElementById("count").innerHTML = editor.getValue().length;
    });
</script>
</body>
</html>