[Javascript] CodeMirror - 折合程式碼(fold gutters)

2017-06-13

之前寫過幾篇關於CodeMirror 的文章，CodeMirror - html+javascript 混和顯示+自動高度增加還有分享一個好用的Javascript Library - CodeMirror ，今天我們要筆記一下關於如何做到收合一些程式碼，結果像是這樣

首先，要先引入 CodeMirror 基本的 javascripr and css 詳細請參考這一篇 : 分享一個好用的Javascript Library - CodeMirror
這邊我就直接貼基本必須引入的程式:

 <!-- CodeMirror-->
    <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>

    <!-- 下列的其實都為了 讓html +js 語言混和必需的js -->
    <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://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/vbscript/vbscript.js"></script>

接下來部分是因為要加入 gutters所加入的引入:

    <!-- CodeMirror-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/addon/fold/foldgutter.min.css" rel="stylesheet" />
    

    <!-- 加入收和功能-->
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/addon/fold/foldcode.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/addon/fold/foldgutter.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/addon/fold/brace-fold.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/addon/fold/xml-fold.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/addon/fold/indent-fold.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/addon/fold/markdown-fold.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/addon/fold/comment-fold.js"></script>

基本上我引入得比較多一點，基本上要要能夠判斷不同語言需要不同的fold 的 javascript
接下來就是initialize 的部分:

    <script>

        var mixedMode = {
            name: "htmlmixed",

            scriptTypes: [{
                matches: /\/x-handlebars-template|\/x-mustache/i,
                mode: null
            },
            {
                matches: /(text|application)\/(x-)?vb(a|script)/i,
                mode: "vbscript"
            }]
        };

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

            //打開收合的功能
            foldGutter: true,
            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]

        });

    </script>

使用前:

使用後:

研究了一下就筆記下來，讓以後自己或是他人都不要跌到坑…

當麻許的超技八

贊助區

廣告專區

站內搜尋

標籤們

連結們

網誌存檔

Author

[Javascript] CodeMirror - 折合程式碼(fold gutters)