CodeMirror Sample1

Basic show Javascript Code.

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/javascript/javascript.js"></script>
   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/htmlmixed/htmlmixed.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/css/css.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"
            integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
            crossorigin="anonymous"></script>





    <xmp id="showCode"></xmp>
<textarea id="txtCode" rows="20" style="width: 100%"></textarea>

<button type="button" id="btnGetSource">取得程式碼</button>

JavaScript

var editor = CodeMirror.fromTextArea(document.getElementById("txtCode"), {
            //語言偵測模式是javascript
            mode: 'javascript',
            //開啟行號
            lineNumbers: true,
            //選取游標
            selectionPointer: true,
            //過長自動換行
            lineWrapping: true

        });

        $('#btnGetSource').click(function () {
            //取得Source Code 並且放到 xmp element 中
            var source = editor.getValue();
            $('#showCode').html(source);

        });