从textarea初始化时，CodeMirror渲染不正确

Question

我正在尝试从textarea初始化一个简单的CodeMirror编辑器，但它似乎无法正确呈现：

    <link rel="stylesheet" href="/css/codemirror.css">
    <script src="/Scripts/CodeMirror/codemirror.js"></script>
    <script src="/Scripts/CodeMirror/addon/edit/matchbrackets.js"></script>
    <link rel="stylesheet" href="/Scripts/CodeMirror/addon/hint/show-hint.css">
    <script src="/Scripts/CodeMirror/addon/hint/show-hint.js"></script>
    <script src="/Scripts/CodeMirror/clike.js"></script>
    <script src="/Scripts/CodeMirror/mode/javascript/javascript.js"></script>
    ....
    <section class="block" id="ValidationFormulaArea" style="display: none;">
        <textarea id="ValidationFormula" name="FORMULA"></textarea>

        <script>
            var editor;
            $(document).ready(function () {
                $("#ValidationFormulaArea").show(0);

                editor = CodeMirror.fromTextArea(document.getElementById("ValidationFormula"), {
                    lineNumbers: true,
                    matchBrackets: true,
                    lineWrapping: true,
                    mode: "text/javascript"
                });
                editor.setSize(800, 400);
                editor.refresh();
            });
        </script>
    </section>

这是它呈现的内容：

这是它应该呈现的内容：

我做错了什么？