<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/addon/edit/matchbrackets.js"></script>
<script src="http://codemirror.net/addon/edit/closebrackets.js"></script>
<script src="http://codemirror.net/addon/edit/closetag.js"></script>
<script src="http://codemirror.net/addon/edit/matchtags.js"></script>
<script src="http://codemirror.net/addon/edit/continuelist.js"></script>
<script src="http://codemirror.net/addon/edit/trailingspace.js"></script>

<scrpit src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></scrpit>
<scrpit src="http://codemirror.net/mode/xml/xml.js"></scrpit>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<scrpit src="http://codemirror.net/mode/css/css.js"></scrpit>
<script src="http://codemirror.net/mode/clike/clike.js"></script>
<script src="http://codemirror.net/mode/php/php.js"></script>

<form>
<textarea rows="4" cols="50" name="code" id="codesnippet_editable">
    <?php
    $a = array('a' => 1, 'b' => 2, 3 => 'c');

    echo "$a[a] ${a[3] /* } comment */} {$a[b]} \$a[a]";

    function hello($who) {
        return "Hello $who!";
    }
    ?>
    <p>The program says <?= hello("World") ?>.</p>
    <script>
        alert("And here is some JS code"); // also colored
    </script>
</textarea>
</form>
<script type="text/javascript">
    window.onload = function () {

    var editableCodeMirror = CodeMirror.fromTextArea(document.getElementById('codesnippet_editable'), {
        mode: "application/x-httpd-php",
        theme: "default",
        lineNumbers: true,
        matchBrackets: true,
        indentUnit: 4,
        indentWithTabs: true
    });


};
</script>